<template>
    <div
        style="height: 100%"
        v-loading="loading"
    >
        <div
            class="overlay"
            v-show="pathologyId"
        >
            <div
                class="tool-bar3"
                :class="{ red: changeColor == 2 }"
                title="诊断列表"
            >
                <font-awesome-icon
                    :icon="['fas', 'user-friends']"
                    size="lg"
                    @click="patienterListMethod"
                />
            </div>
            <div class="tool-bar3">
                <div
                    style="margin-right: 3px"
                    :class="{ red: changeColor == 1 }"
                    title="上一个病人"
                    @click="diagnosisLast()"
                >
                    <font-awesome-icon
                        :icon="['fas', 'angle-left']"
                        size="lg"
                    />
                </div>
                <div
                    style="margin-left: 3px"
                    :class="{ red: changeColor == 3 }"
                    title="下一个病人"
                    @click="diagnosisNext()"
                >
                    <font-awesome-icon
                        :icon="['fas', 'angle-right']"
                        size="lg"
                    />
                </div>
            </div>

            <div
                class="tool-bar1"
                :class="{ red: changeColor == 4 }"
                title="诊断详情"
            >
                <font-awesome-icon
                    :icon="['fas', 'file-alt']"
                    size="lg"
                    @click="patienterDetailMethod"
                />
            </div>
            <div
                class="tool-bar1"
                :class="{ red: changeColor == 14 }"
                title="切片重扫"
            >
                <font-awesome-icon
                    :icon="['fas', 'wrench']"
                    size="lg"
                    @click="sliceRescan"
                />
            </div>
            <div class="cut-line"></div>
            <div
                class="tool-bar1"
                style="font-size: 20px"
                :class="{ red: changeColor == 29 }"
                @click="pictureToolPanelShow(2)"
                title="画笔工具"
            >
                <i class="el-icon-edit-outline"></i>
            </div>
            <div class="cut-line"></div>
            <div
                class="tool-bar1"
                style="font-size: 20px"
                :class="{ red: changeColor == 30 }"
                @click="pictureToolPanelShow(1)"
                title="切片工具"
            >
                <i
                    class="el-icon-menu"
                    size="large"
                ></i>
            </div>
            <div
                class="tool-bar1"
                style="font-size: 20px"
                :class="{ red: changeColor == 31 }"
                @click="pictureToolPanelShow(3)"
                title="色彩工具"
            >
                <i class="el-icon-picture-outline-round"></i>
            </div>

            <div
                class="tool-bar1"
                style="font-size: 20px"
                :class="{ red: changeColor == 32 }"
                @click="pictureToolPanelShow(4)"
                title="设置"
            >
                <i class="el-icon-setting"></i>
            </div>
            <div class="cut-line"></div>
            <div
                class="tool-bar1"
                :class="{ red: changeColor == 12 }"
                title="智能预测"
                @click="drawerAi()"
            >
                <span class="tool-icon ai-icon">AI</span>
            </div>
            <div
                class="tool-bar1"
                :class="{ red: changeColor == 24 }"
                title="AI分析列表"
                @click="AIEvaluation()"
            >
                <i class="el-icon-notebook-2"></i>
            </div>
            <div class="cut-line"></div>
            <div
                class="tool-bar1"
                :class="{ red: changeColor == 33 }"
                title="切片信息"
                @click="isShowSliceInfo()"
            >
                <i class="el-icon-reading"></i>
            </div>
            <div
                class="tool-bar1"
                :class="{ red: changeColor == 34 }"
                title="诊断依据"
                @click="isShowDiagnosticBasis()"
            >
                <i class="el-icon-notebook-1"></i>
            </div>
        </div>
        <div
            class="divCoordinateColor"
            v-if="isColorPanelShow"
        >
            <div class="block">
                <el-row>
                    <el-col
                        :span="6"
                        style="padding-top: 8px"
                    ><span style="
                                padding-top: 2px;
                                padding-left: 2px;
                                color: #fff;
                            ">对比度</span></el-col>
                    <el-col :span="18">
                        <el-slider
                            v-model="coordinateColor.contrast"
                            @input="onContrastSlideChange"
                        ></el-slider>
                    </el-col>
                </el-row>
            </div>
            <div class="block">
                <el-row>
                    <el-col
                        :span="6"
                        style="padding-top: 8px; color: #fff"
                    ><span class="demonstration">亮度</span></el-col>
                    <el-col :span="18">
                        <el-slider
                            v-model="coordinateColor.light"
                            @input="onLightSlideInput"
                        ></el-slider>
                    </el-col>
                </el-row>
            </div>
            <div class="block">
                <el-row>
                    <el-col
                        :span="6"
                        style="padding-top: 8px; color: #fff"
                    ><span class="demonstration">Gama</span></el-col>
                    <el-col :span="18">
                        <el-slider
                            v-model="coordinateColor.gama"
                            @input="onGamaSlideInput"
                        ></el-slider>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div
            class="divPictureHandle"
            v-if="isSlicePanelShow"
        >
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 18 }"
                title="右旋"
            >
                <font-awesome-icon
                    @click="rotateRight"
                    :icon="['fas', 'redo']"
                    size="lg"
                />
            </div>
            <!-- <div class="tool-bar-degree" style="width: 40px">
        <el-input size="mini" v-model.number="viewerAngleCopy"></el-input>
      </div> -->
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 19 }"
                title="左旋"
            >
                <font-awesome-icon
                    @click="rotateLeft"
                    :icon="['fas', 'undo']"
                    size="lg"
                />
            </div>
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 13 }"
                @click="screenshot()"
                title="截图"
            >
                <font-awesome-icon
                    :icon="['fas', 'crop']"
                    size="lg"
                />
            </div>
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 15 }"
                style="font-size: 20px"
                @click="sreenFull()"
                title="窗口全屏"
            >
                <!--                <div class="keyword">F11</div>-->
                <i
                    class="el-icon-full-screen"
                    size="large"
                ></i>
            </div>

            <div
                class="tool-bar2"
                :class="{ red: changeColor == 16 }"
                data-toggle="modal"
                data-target="#myModal"
                @click="hotkeyMethods"
                title="快捷键"
            >
                <font-awesome-icon
                    :icon="['fas', 'keyboard']"
                    size="lg"
                />
            </div>
            <!-- 显示重置之后的倍数 -->
            <!-- <div
        id="viewZoomNumber"
        class="tool-bar1"
        style="padding-left: 3px; font-size: small"
      >
        {{ viewZoomNumber }}
      </div> -->
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 17 }"
                title="重置"
            >
                <font-awesome-icon
                    @click="goHome"
                    :icon="['fas', 'globe-asia']"
                    size="lg"
                />
            </div>

            <div
                class="tool-bar2"
                :class="{ red: changeColor == 9 }"
                title="测距工具"
            >
                <font-awesome-icon
                    :icon="['fas', 'ruler']"
                    size="lg"
                    @click="toggleMeasureDistance"
                />
            </div>
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 10 }"
                title="周长、面积测量工具"
            >
                <font-awesome-icon
                    :icon="['fas', 'square']"
                    size="lg"
                    @click="toggleMeasureArea"
                />
            </div>
        </div>
        <div
            class="divMarkLabelHandle"
            v-if="isPencilPanelShow"
        >
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 5 }"
                title="画笔标注"
            >
                <font-awesome-icon
                    :icon="['fas', 'pencil-alt']"
                    size="lg"
                    @click="togglePencil"
                />
            </div>
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 6 }"
                title="矩形标注"
            >
                <font-awesome-icon
                    :icon="['fas', 'vector-square']"
                    size="lg"
                    @click="toggleRectangle"
                />
            </div>
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 7 }"
                title="多边形标注"
            >
                <font-awesome-icon
                    :icon="['fas', 'draw-polygon']"
                    size="lg"
                    @click="togglePolygon"
                />
            </div>
            <div
                class="tool-bar2"
                style="font-size: 25px"
                :class="{ red: changeColor == 21 }"
                @click="toggleCircle"
                title="圆形标注"
            >
                <i
                    class="el-icon-aim"
                    size="large"
                ></i>
            </div>
            <div
                class="tool-bar2"
                style="font-size: 25px"
                :class="{ red: changeColor == 22 }"
                @click="togglePencilLine"
                title="涂抹标注"
            >
                <i
                    class="el-icon-edit"
                    size="large"
                ></i>
            </div>

            <div
                class="tool-bar2"
                style="font-size: 25px"
                :class="{ red: changeColor == 23 }"
                @click="toggleArrow"
                title="箭头"
            >
                <i
                    class="el-icon-top-right"
                    size="large"
                ></i>
            </div>
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 8 }"
                title="隐藏标注"
            >
                <font-awesome-icon
                    :icon="['fas', 'eye-slash']"
                    size="lg"
                    @click="hideCallout"
                    v-if="this.ifhideCallout"
                />
                <font-awesome-icon
                    :icon="['fas', 'eye']"
                    v-if="!this.ifhideCallout"
                    size="lg"
                    @click="hideCallout"
                />
            </div>
            <div
                class="tool-bar2"
                :class="{ red: changeColor == 11 }"
                title="清除"
            >
                <font-awesome-icon
                    :icon="['fas', 'brush']"
                    size="lg"
                    @click="clearMeasure"
                />
            </div>
        </div>
        <div
            class="divSettingSwitch"
            v-if="isSwitchPanelShow"
        >
            <el-switch
                style="margin: 5px"
                v-model="switchValue.scale"
                active-text="比例尺"
                inactive-text=""
            >
            </el-switch>
            <el-switch
                style="margin: 5px"
                v-model="switchValue.zoom"
                active-text="缩放"
                inactive-text=""
            >
            </el-switch>
            <el-switch
                style="margin: 5px"
                v-model="switchValue.disc"
                active-text="播放"
                inactive-text=""
            >
            </el-switch>
            <el-switch
                style="margin: 5px"
                v-model="switchValue.markLabel"
                active-text="标注"
                inactive-text=""
            >
            </el-switch>
            <el-switch
                style="margin: 5px"
                v-model="switchValue.AIAnalysis"
                active-text="AI分析"
                inactive-text=""
            >
            </el-switch>
            <el-switch
                style="margin: 5px"
                v-model="switchValue.patientId"
                active-text="病理号"
                inactive-text=""
            >
            </el-switch>
            <el-switch
                style="margin: 5px"
                v-model="switchValue.net"
                active-text="网格"
                inactive-text=""
            >
            </el-switch>
            <el-switch
                style="margin: 5px"
                v-model="switchValue.isFlicker"
                active-text="闪烁"
                inactive-text=""
            />
            <!--            <el-switch style="margin:5px"-->
            <!--                       v-model="switchValue.navigator"-->
            <!--                       active-text="导航"-->
            <!--                       inactive-text="">-->
            <!--            </el-switch>-->
        </div>
        <div class="openSeadragon">
            <open-seadragon
                v-show="ifOpenseadragon"
                ref="openseadragon"
                :dzi-url="dziUrl"
                :pixelsPerMeter="1992428.7706714484"
                @annotation-drawing-end="annotationDrawingEnd"
                @uploadAnnotation="uploadAnnotation"
                @jumpToNumber="jumpToNumber"
                :annotationsData="annotationsDataInit"
                :AiAnnotationsData="aiAnnotationsData"
                :info="info"
                @openseadragon-open="openseadragonOpen"
                @ai-annotation-drawing-end="aiAnnotationDrawingEnd"
                @view-zoom="viewZoom"
                @annotation-select="annotationSelect"
            >
            </open-seadragon>
        </div>
        <div>
            <el-dialog
                title="诊断列表"
                :visible.sync="visibleDict.patienterList"
                @closed="DiagnosisListclosed"
                width="80%"
            >
                <DiagnosisList></DiagnosisList>
            </el-dialog>
            <el-dialog
                title="诊断详情"
                :visible.sync="visibleDict.patienterDetail"
                :key="pathologyId"
                :fullscreen="isFullScreen"
                width="80%"
                @closed="patienterDetailclosed"
            >
                <template>
                    <div
                        style="
                            position: absolute;
                            right: 50px;
                            font-size: 20px;
                            z-index: 999;
                        "
                        @click="becomeFullScreen"
                    >
                        <i class="el-icon-zoom-in"></i>
                    </div>
                </template>
                <diagnosis-detail :ActiveTab="activeTabItem"></diagnosis-detail>
            </el-dialog>
            <el-dialog
                :visible.sync="visibleDict.annotationsWarn"
                width="20%"
                :show-close="false"
                :close-on-click-modal="false"
            >
                <el-form
                    ref="markRefForm"
                    :model="mark"
                    :rules="markRules"
                >
                    <el-row>
                        <el-col :span="24">
                            <el-form-item
                                prop="warning"
                                label="标注笔记:"
                                style="margin-bottom: 10px"
                            >
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    v-model="mark.warning"
                                    size="mini"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item
                                label="备注内容:"
                                prop="remark"
                            >
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    v-model="mark.remark"
                                    size="mini"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 16px">
                        <el-col
                            :span="12"
                            style="text-align: center"
                        >
                            <el-form-item>
                                <el-button
                                    type="primary"
                                    @click="Submit"
                                    size="mini"
                                >确定
                                </el-button>
                            </el-form-item>
                        </el-col>
                        <el-col
                            :span="12"
                            style="text-align: center"
                        >
                            <el-form-item>
                                <el-button
                                    @click="annotationsWarnCancel"
                                    size="mini"
                                >取消
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>
            <el-dialog
                title="快捷键说明"
                @closed="hotkeyclosed"
                :visible.sync="hotkey"
                width="50%"
            >
                <HotKey></HotKey>
            </el-dialog>
            <div
                v-if="annDialogVisible"
                class="updateInfo"
            >
                <el-form
                    ref="markRefForm"
                    :model="mark"
                    :rules="markRules"
                    style="padding: 3px"
                >
                    <el-form-item
                        style="margin-bottom: 16px"
                        prop="warning"
                        class="formLableColor"
                        label="标注笔记:"
                    >
                        <el-input
                            type="textarea"
                            :rows="2"
                            v-model="mark.warning"
                            size="mini"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        style="margin-bottom: 16px"
                        prop="remark"
                        class="formLableColor"
                        label="备注内容:"
                    >
                        <el-input
                            type="textarea"
                            :rows="2"
                            v-model="mark.remark"
                            size="mini"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        class="formLableColor"
                        label="面积:"
                    >
                        <span>{{ updateAnnInfo.area }}μm²</span>
                    </el-form-item>
                    <el-form-item
                        class="formLableColor"
                        label="长:"
                    >
                        <span>{{ updateAnnInfo.width }}μm</span>
                    </el-form-item>
                    <el-form-item
                        class="formLableColor"
                        label="宽:"
                    >
                        <span>{{ updateAnnInfo.height }}μm</span>
                    </el-form-item>
                    <el-form-item
                        class="formLableColor"
                        label="标注人:"
                    >
                        <span>{{ updateAnnInfo.saveUserName }}</span>
                    </el-form-item>
                    <el-form-item
                        class="formLableColor"
                        label="时间:"
                    >
                        <span>{{ updateAnnInfo.createAt }}</span>
                    </el-form-item>
                </el-form>
                <div
                    slot="footer"
                    style="float: right"
                    class="dialog-footer"
                >
                    <el-button
                        size="mini"
                        @click="annDialogVisible = false"
                    >取 消
                    </el-button>
                    <el-button
                        type="primary"
                        size="mini"
                        @click="updateAnnSubmit(updateAnnInfo.annotationId)"
                    >确 定
                    </el-button>
                </div>
            </div>
            <AIFloating
                ref="AIFloatingREF"
                v-if="drawer"
                @jumpTo="jumpTo"
                :AIdata="AIdata"
                :F3info="F3info"
            >
            </AIFloating>
            <SliceInfo
                ref="SliceInfo"
                :SliceInfoData="SliceInfoData"
                v-if="SliceInfoData != null && visibleDict.isShowSliceInfoStatus"
            >
            </SliceInfo>
            <el-dialog
                title=""
                :visible.sync="diagnosticBasisData.showStatus"
                width="100%"
                center
                :fullscreen="isFullScreen"
            >
                <diagnostic-basis
                    :content="diagnosticBasisData.data"
                    :our-conclusion="diagnosticBasisData.ourConclusion"
                    :table-data="diagnosticBasisData.tableData"
                    :name="diagnosticBasisData.name"
                    :sex="diagnosticBasisData.sex"
                    :age="diagnosticBasisData.age"
                    :height="diagnosticBasisData.height"
                    :weight="diagnosticBasisData.weight"
                    :suspicious="diagnosticBasisData.suspicious"
                />
            </el-dialog>
            <Analysis v-if="Ifanalysis"></Analysis>
            <!-- 评价列表 -->
            <el-dialog
                title="AI分析列表"
                @closed="AIEvaluationClose"
                :visible.sync="visibleDict.AIEvaluationDialogList"
                width="80%"
                center
            >
                <el-form label-width="70px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="病理号">
                                <el-input
                                    v-model="EvaluationFormFilter.pathologyId"
                                    placeholder="请输入查询的病理号"
                                    class="input-form"
                                    size="mini"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="切片id">
                                <el-input
                                    v-model="EvaluationFormFilter.biopsyId"
                                    placeholder="请输入查询的切片id"
                                    class="input-form"
                                    size="mini"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col
                            :span="2"
                            :offset="8"
                        >
                            <el-button
                                size="mini"
                                @click="search"
                            >
                                <font-awesome-icon :icon="['fas', 'search']">
                                </font-awesome-icon>
                            </el-button>
                        </el-col>
                        <el-col :span="2">
                            <el-button
                                @click="AIEvaluationDialogShow"
                                size="mini"
                            >新增
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <base-table
                    :data="AIEvaluationDialogListTableData"
                    :header="AIEvaluationDialogListTableHeader"
                    :operation="operation"
                    :pageInfo="pageInfo"
                    :pageSizes="[5, 10, 15]"
                    @handleClick="exampleTableButtonClick"
                    @pageJumpTo="exampleTablePageJumpTo"
                    @sizeChange="exampleTableSizeChange"
                >
                </base-table>
            </el-dialog>
            <!-- 诊断实验结果统计 -->
            <el-dialog
                title="诊断实验结果统计"
                :visible.sync="experimentDialog"
                width="40%"
                center
                @close="closeExperimentDialog"
            >
                <DiagnosisResultStatisticsComp
                    :isAutoRefresh="false"
                    ref="DiagnosisResultStatisticsComp"
                ></DiagnosisResultStatisticsComp>
            </el-dialog>
            <!-- 评价详情 -->
            <el-dialog
                title="AI分析准确性评价"
                :visible.sync="visibleDict.AIEvaluationDialog"
                width="40%"
                center
                @close="closeAIDialog"
            >
                <el-form label-width="100px">
                    <el-row>
                        <el-col
                            :span="10"
                            :offset="4"
                        >
                            <el-form-item label="病理号">
                                <el-input
                                    v-model="AIEvaluationForm.pathologyId"
                                    placeholder="请输入病理号"
                                    class="input-form"
                                    size="mini"
                                    disabled
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="切片名称">
                                <el-input
                                    v-model="AIEvaluationForm.sliceName"
                                    placeholder="请输入切片名称"
                                    class="input-form"
                                    size="mini"
                                    disabled
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col
                            :span="4"
                            class="height40"
                        >阴阳性:
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input
                                    v-model="AIEvaluationForm.masculineAi"
                                    placeholder=""
                                    class="input-form"
                                    size="mini"
                                    disabled
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select
                                    v-model="AIEvaluationForm.expertAdvice"
                                    placeholder="请选择专家意见"
                                    class="picker-form"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="(
                                            data, index
                                        ) in AIEvaluationFormList.yinyangOpinion"
                                        :key="index"
                                        :label="data.name"
                                        :value="data.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col
                            :span="4"
                            class="height40"
                        >专家诊断:
                        </el-col>
                        <el-col :span="20">
                            <el-row class="height40">
                                <el-col :span="4">
                                    <el-radio
                                        v-model="AIEvaluationForm.radio"
                                        label="低瘤"
                                    >低瘤
                                    </el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio
                                        v-model="AIEvaluationForm.radio"
                                        label="高瘤"
                                    >高瘤
                                    </el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio
                                        v-model="AIEvaluationForm.radio"
                                        label="腺癌"
                                    >腺癌
                                    </el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio
                                        v-model="AIEvaluationForm.radio"
                                        label="印戒"
                                    >印戒
                                    </el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio
                                        v-model="AIEvaluationForm.radio"
                                        label="诊断不明，提示准确"
                                    >诊断不明，提示准确
                                    </el-radio>
                                </el-col>
                            </el-row>
                            <el-row class="height40">
                                <el-col :span="4">
                                    <el-radio
                                        v-model="AIEvaluationForm.radio"
                                        label="鳞癌"
                                    >鳞癌
                                    </el-radio>
                                </el-col>
                                <el-col :span="4">
                                    <el-radio
                                        v-model="AIEvaluationForm.radio"
                                        label="淋巴瘤"
                                    >淋巴瘤
                                    </el-radio>
                                </el-col>

                                <el-col :span="4">
                                    <el-radio
                                        v-model="AIEvaluationForm.radio"
                                        label="其他"
                                    >其他
                                    </el-radio>
                                </el-col>
                                <el-col :span="8">
                                    <el-input
                                        v-model="AIEvaluationForm.other"
                                        placeholder=""
                                        class="input-form"
                                        size="mini"
                                    >
                                    </el-input>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 10px auto">
                        <el-col :span="24">备注（可记录错误的勾画圈号，如可疑1）:
                        </el-col>
                        <el-col>
                            <el-input
                                type="textarea"
                                v-model="AIEvaluationForm.remark"
                            >
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row style="text-align: center">
                        <el-button
                            v-show="!!AIEvaluationForm.masculineAi"
                            type="primary"
                            @click="correctYinYang"
                            icon="el-icon-check"
                        >准确(阴阳性判断)
                        </el-button>
                        <el-button
                            v-show="!!AIEvaluationForm.masculineAi"
                            type="danger"
                            @click="errorYinYang"
                            icon="el-icon-close"
                        >错误(阴阳性判断)
                        </el-button>
                    </el-row>
                    <el-row>
                        <el-col
                            :span="4"
                            class="height40"
                        >慢性炎症:
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input
                                    v-model="
                                        AIEvaluationForm.chronicInflammationAi
                                    "
                                    placeholder=""
                                    class="input-form"
                                    size="mini"
                                    disabled
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select
                                    v-model="
                                        AIEvaluationForm.chronicInflammationExpertAdvice
                                    "
                                    placeholder="请选择专家意见"
                                    class="picker-form"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="(
                                            data, index
                                        ) in AIEvaluationFormList.expertAdviceList"
                                        :key="index"
                                        :label="data.name"
                                        :value="data.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col
                            :span="4"
                            class="height40"
                        >肠化:
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input
                                    v-model="AIEvaluationForm.imAi"
                                    placeholder=""
                                    class="input-form"
                                    size="mini"
                                    disabled
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select
                                    v-model="AIEvaluationForm.imExpertAdvice"
                                    placeholder="请选择专家意见"
                                    class="picker-form"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="(
                                            data, index
                                        ) in AIEvaluationFormList.expertAdviceList"
                                        :key="index"
                                        :label="data.name"
                                        :value="data.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col
                            :span="4"
                            class="height40"
                        >萎缩:
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input
                                    v-model="AIEvaluationForm.atrophyAi"
                                    placeholder=""
                                    class="input-form"
                                    size="mini"
                                    disabled
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select
                                    v-model="
                                        AIEvaluationForm.atrophyExpertAdvice
                                    "
                                    placeholder="请选择专家意见"
                                    class="picker-form"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="(
                                            data, index
                                        ) in AIEvaluationFormList.expertAdviceList"
                                        :key="index"
                                        :label="data.name"
                                        :value="data.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col
                            :span="4"
                            class="height40"
                        >活动度:
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input
                                    v-model="AIEvaluationForm.activityAi"
                                    placeholder=""
                                    class="input-form"
                                    size="mini"
                                    disabled
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select
                                    v-model="
                                        AIEvaluationForm.activityExpertAdvice
                                    "
                                    placeholder="请选择专家意见"
                                    class="picker-form"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="(
                                            data, index
                                        ) in AIEvaluationFormList.expertAdviceList"
                                        :key="index"
                                        :label="data.name"
                                        :value="data.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col
                            :span="4"
                            class="height40"
                        >HP:
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input
                                    v-model="AIEvaluationForm.hpai"
                                    placeholder=""
                                    class="input-form"
                                    size="mini"
                                    disabled
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select
                                    v-model="AIEvaluationForm.hpexpertAdvice"
                                    placeholder="请选择专家意见"
                                    class="picker-form"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="(
                                            data, index
                                        ) in AIEvaluationFormList.expertAdviceList"
                                        :key="index"
                                        :label="data.name"
                                        :value="data.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col
                            :span="4"
                            class="height40"
                        >异性增生:
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="AI分析">
                                <el-input
                                    v-model="AIEvaluationForm.alienGrowthAi"
                                    placeholder=""
                                    class="input-form"
                                    size="mini"
                                    disabled
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="专家意见">
                                <el-select
                                    v-model="
                                        AIEvaluationForm.alienGrowthExpertAdvice
                                    "
                                    placeholder="请选择专家意见"
                                    class="picker-form"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="(
                                            data, index
                                        ) in AIEvaluationFormList.expertAdviceList"
                                        :key="index"
                                        :label="data.name"
                                        :value="data.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col
                            :span="10"
                            :offset="4"
                        >
                            <el-form-item label="评价专家">
                                <el-input
                                    v-model="AIEvaluationForm.evaluateExpert"
                                    placeholder=""
                                    class="input-form"
                                    size="mini"
                                    disabled
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="评价日期">
                                <el-date-picker
                                    v-model="AIEvaluationForm.evaluateTime"
                                    type="datetime"
                                    size="mini"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span
                    slot="footer"
                    class="dialog-footer"
                >
                    <el-button
                        type="primary"
                        @click="closeAIEvaluationDialog"
                    >取 消</el-button>
                    <el-button
                        v-show="!!AIEvaluationForm.masculineAi"
                        type="primary"
                        @click="copyAiAnalysis"
                        icon="el-icon-check"
                    >全部准确</el-button>
                    <el-button
                        type="primary"
                        @click="putExpertOpinion"
                        v-show="btnSureShow == true"
                    >提 交</el-button>
                </span>
            </el-dialog>

            <div
                class="dialog"
                v-if="annotationsData.length > 0 && switchValue.markLabel"
            >
                <ul>
                    <template v-for="(data, index) in annotationsData">
                        <li
                            @mouseover="selectStyle(data)"
                            :key="index"
                            @mouseout="outStyle(data)"
                        >
                            <div style="position: relative; height: 100px">
                                <img
                                    class="liImg"
                                    v-bind:src="data.imageUrl"
                                    @click="updateAnnotation(data)"
                                />
                                <img
                                    src="/images/cancel.png"
                                    @click="deleteAnnotation(data.annotationId)"
                                    style="
                                        position: absolute;
                                        right: 10px;
                                        width: 20px;
                                        cursor: pointer;
                                    "
                                />
                                <span class="annPicUserName">
                                    {{ data.saveUserName }}</span>
                            </div>
                            <div
                                :class="{ active: data.active }"
                                v-show="data.active"
                            >
                                <el-form style="padding: 3px">
                                    <el-form-item
                                        type="textarea"
                                        :rows="2"
                                        class="formLableColor"
                                        label="标注笔记:"
                                    >
                                        <span>{{ data.remarkOne }}</span>
                                    </el-form-item>
                                    <el-form-item
                                        type="textarea"
                                        :rows="2"
                                        class="formLableColor"
                                        label="备注内容:"
                                    >
                                        <span>{{ data.remarkTwo }}</span>
                                    </el-form-item>
                                    <el-form-item
                                        class="formLableColor"
                                        label="面积:"
                                    >
                                        <span>{{ data.areaInfo.area }}μm²</span>
                                    </el-form-item>
                                    <el-form-item
                                        class="formLableColor"
                                        label="长:"
                                    >
                                        <span>{{ data.areaInfo.width }}μm</span>
                                    </el-form-item>
                                    <el-form-item
                                        class="formLableColor"
                                        label="宽:"
                                    >
                                        <span>{{ data.areaInfo.height }}μm</span>
                                    </el-form-item>
                                    <el-form-item
                                        class="formLableColor"
                                        label="标注人:"
                                    >
                                        <span>{{ data.saveUserName }}</span>
                                    </el-form-item>
                                    <el-form-item
                                        class="formLableColor"
                                        label="时间:"
                                    >
                                        <span>{{ data.createAt }}</span>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
            <div
                class="quality-evaluation"
                v-show="qualityEvaluationShow"
            >
                <el-form label-width="75px">
                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="切片质量:">
                                <el-select
                                    v-model="
                                        qualityEvaluationForm.biopsyQuality
                                    "
                                    class="picker-form"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="t in biopsyQualityList"
                                        :key="t.id"
                                        :label="t.label"
                                        :value="t.label"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="清晰度:">
                                <el-select
                                    v-model="
                                        qualityEvaluationForm.scanDefinition
                                    "
                                    class="picker-form"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="t in scanQualityList"
                                        :key="t.id"
                                        :label="t.label"
                                        :value="t.label"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col
                            :span="1"
                            class="juzhong"
                        >
                            <el-button
                                type="primary"
                                size="mini"
                                @click="submitEvaluate"
                            >提交
                            </el-button>
                        </el-col>
                        <el-col
                            :span="2"
                            class="juzhong"
                        >
                            <el-input
                                type="number"
                                min="1"
                                v-model="qualityEvaluationForm.serialNumber"
                                placeholder="切片序号"
                                class="input-form"
                                size="mini"
                            >
                                <el-button
                                    slot="append"
                                    icon="el-icon-search"
                                    size="mini"
                                    @click="findSliceByCurrentBiopsyCount"
                                ></el-button>
                            </el-input>
                        </el-col>
                        <el-col
                            :span="1"
                            class="juzhong"
                            style="margin-left: 15px"
                        >
                            <el-button
                                type="primary"
                                size="mini"
                                @click="scanerPrev"
                            >上一张
                            </el-button>
                        </el-col>
                        <el-col
                            :span="1"
                            class="juzhong"
                        >
                            <el-button
                                type="primary"
                                size="mini"
                                @click="scanerNext"
                            >下一张
                            </el-button>
                        </el-col>
                        <el-col
                            :span="2"
                            class="juzhong"
                        >
                            <el-button
                                type="primary"
                                size="mini"
                                @click="rescan"
                            >需重扫并进入下一张
                            </el-button>
                        </el-col>

                        <el-col
                            :span="1"
                            class="juzhong"
                        >
                            <el-button
                                type="primary"
                                size="mini"
                                @click="scanQualityPass"
                            >通过并进入下一张
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col
                            :span="8"
                            :offset="8"
                        >
                            <div class="juzhong">
                                当前第
                                <span class="red-color">{{
                                        qualityEvaluationForm.currentSerialNumber.split(
                                            '/'
                                        )[0]
                                    }}</span>
                                片/共
                                <span class="red-color">{{
                                        qualityEvaluationForm.currentSerialNumber.split(
                                            '/'
                                        )[1]
                                    }}
                                </span>
                                片
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div
                class="F3info"
                v-if="switchValue.markLabel"
            >
                <span v-html="F3AnalysisInfo"></span>
            </div>

            <div
                class="leftPic"
                @mouseover="mouseover"
                @mouseout="mouseout"
                v-bind:style="styleObjectClass"
                v-if="showleftPic"
            >
                <div
                    :key="index"
                    v-for="(data, index) in biopsyList"
                    style="position: relative"
                >
                    <img
                        v-bind:src="ImageServiceURL + data.previewUrl"
                        :class="isActive == index ? 'yesActive' : 'noActive'"
                        @click="
                            getAnnotations(
                                data.id,
                                data.newFilename,
                                data.originFilename,
                                data.labelUrl,
                                index
                            )
                        "
                    />
                    <div
                        :class="[
                            data.pred == '0'
                                ? 'greenStatus'
                                : data.pred == '1'
                                ? 'redStatus'
                                : 'greyStatus',
                        ]"
                        class="colorStatus"
                    ></div>
                </div>
            </div>

            <div
                class="rightLable"
                v-show="this.switchValue.patientId"
            >
                <img
                    style="height: 95px; width: 201px"
                    v-bind:src="ImageServiceURL + reversedLabelUrl"
                    alt=""
                />
            </div>
        </div>
        <!-- 截图 -->
        <canvas id="drawRectCanvas"></canvas>
        <canvas id="shadeCanvas"></canvas>

        <div
            id="prescription"
            style="display: none; background: white; flex-wrap: wrap"
        >
            <!--倍率框-->
            <div
                id="rate"
                style="text-align: left; width: 100%"
            ></div>
            <!--时间框-->
            <div
                id="screenshotTime"
                style="text-align: left; width: 100%"
            ></div>
            <!--可输入框-->
            <div
                id="SCinputBox"
                style="
                    text-align: center;
                    width: 100%;
                    word-break: break-all;
                    word-wrap: break-word;
                    background: white;
                    font-size: 18px;
                "
                contenteditable="true"
                placeholder="请输入描述内容"
            ></div>
        </div>
        <div id="canvasToolbar">
            <div
                class="canvasButton"
                title="退出截图"
                id="cancel"
                @click="sCancel"
            >
                <font-awesome-icon
                    :icon="['fas', 'power-off']"
                    size="lg"
                />
            </div>
            <div
                class="canvasButton"
                title="完成截图"
                id="success"
                @click="sSuccess"
            >
                <font-awesome-icon
                    :icon="['fas', 'check']"
                    size="lg"
                />
            </div>
        </div>
    </div>
</template>

<script>
import qs from 'qs';
import _ from 'lodash';
import $ from 'jquery';
import jcanvasFactory from './Viewer/jcanvas';
import html2canvas from './Viewer/html2canvas';
import OpenSeadragon from './components/OpenSeadragon/OpenSeadragon';
import DiagnosisList from './Viewer/ViewerDiagnosisList';
import AIFloating from './Viewer/AIFloating';
import SliceInfo from './Viewer/SliceInfo';
import HotKey from './Viewer/Hotkey';
import DiagnosisDetail from './components/DiagnosisDetail';
import Analysis from './Viewer/Analysis';
import BaseTable from '@templates/components/BaseTable';
import Client from '../../server/client';
import Diagnosis from './Diagnosis/Diagnosis.vue';
import DiagnosisResultStatisticsComp from '@templates/components/diagnosisResultStatisticsComp.vue';
import DiagnosticBasis from '@/client/templates/components/DiagnosticBasis';
import { vxRule } from '../libs/validator';

export default {
    components: {
        OpenSeadragon,
        DiagnosisList,
        DiagnosisDetail,
        AIFloating,
        SliceInfo,
        HotKey,
        Analysis,
        BaseTable,
        Diagnosis,
        DiagnosisResultStatisticsComp,
        DiagnosticBasis,
    },
    data() {
        return {
            userName: this.$store.state.user.name,
            currentSuspicious: {}, //当前可疑点
            switchValue: {
                scale: true,
                zoom: true,
                disc: true,
                markLabel: true,
                AIAnalysis: true,
                patientId: true,
                navigator: true,
                net: false,
                isFlicker: false, //控制标注闪烁
            },
            isFullScreen: true,
            isSlicePanelShow: false,
            isPencilPanelShow: false,
            isColorPanelShow: false,
            isSwitchPanelShow: false,
            coordinateColor: {
                red: 50,
                blue: 50,
                gama: 100,
                yellow: 50,
                contrast: 100,
                light: 50,
            },
            //传给组件diagnosisdetail组件的值，快捷键调出子组件对应的tab-item
            activeTabItem: 'tabBase',
            // 左侧切片图片样式
            styleObject: {
                cursor: 'pointer',
                position: 'relative',
                isDisplay: 'inline',
                width: '200px',
            },
            styleObjectClass: {
                left: '-100px',
            },
            yinYangIcons: [],
            biopsyList: [],
            biopsyId: this.$route.query.biopsyId,
            newBiopsyid: this.$route.query.biopsyId, //根据扫描员点击上一张下一张变的切片id
            biopsyOriginFilename: this.$route.query.originFilename,
            labelUrl: '',
            annotationsDataInit: [],
            ifhideCallout: false,
            active: false,
            // 标注提示
            mark: {
                warning: '',
                remark: '',
            },
            markRules: {
                warning: [
                    vxRule(true, null, 'blur', '请填写标注笔记'),
                    vxRule(
                        true,
                        'length',
                        'blur',
                        '标注笔记填写请不要超过255个字符',
                        null,
                        255
                    ),
                ],
                remark: [
                    vxRule(true, null, 'blur', '请填写备注内容'),
                    vxRule(
                        true,
                        'length',
                        'blur',
                        '备注内容填写请不要超过255个字符',
                        null,
                        255
                    ),
                ],
            },
            newannotations: [],
            newPic: '',
            // 组件AI数据
            F3info: null,
            F3AnalysisInfo: '',
            AIdata: null,
            SliceInfoData: null,
            drawer: false,
            Ifanalysis: false,
            experimentDialog: false,

            AIEvaluationDialogListTableData: [],
            operation: [
                {
                    label: '查看详情',
                    color: 'red',
                    functionKey: 'watchDetail',
                },
            ],
            pageInfo: {
                page: 1,
                size: 15,
                total: 0,
            },
            AIEvaluationDialogListTableHeader: [
                {
                    label: '切片id',
                    prop: 'biopsyId',
                    width: '180',
                },
                {
                    label: '切片名称',
                    prop: 'sliceName',
                    width: '180',
                },
                {
                    label: '阴阳性（AI）',
                    prop: 'masculineAi',
                    width: '180',
                },
                {
                    label: '阴阳性（专家）',
                    prop: 'expertAdvice',
                    width: '180',
                },
                {
                    label: '创建医生',
                    prop: 'createUser',
                    width: '180',
                },
                {
                    label: '创建时间',
                    prop: 'createTime',
                    width: '180',
                },
                {
                    label: '更新医生',
                    prop: 'updateUser',
                    width: '180',
                },
                {
                    label: '更新时间',
                    prop: 'updateTime',
                    width: '180',
                },
                {
                    label: '慢性炎症（AI）',
                    prop: 'chronicInflammationAi',
                    width: '180',
                },
                {
                    label: '慢性炎症（专家）',
                    prop: 'chronicInflammationExpertAdvice',
                    width: '180',
                },
                {
                    label: '肠化（AI）',
                    prop: 'imAi',
                    width: '180',
                },
                {
                    label: '肠化（专家）',
                    prop: 'imExpertAdvice',
                    width: '180',
                },
                {
                    label: '萎缩（AI）',
                    prop: 'atrophyAi',
                    width: '180',
                },
                {
                    label: '萎缩（专家）',
                    prop: 'atrophyExpertAdvice',
                    width: '180',
                },
                {
                    label: '活动性（AI）',
                    prop: 'activityAi',
                    width: '180',
                },
                {
                    label: '活动性（专家）',
                    prop: 'activityExpertAdvice',
                    width: '180',
                },
                {
                    label: 'HP（AI）',
                    prop: 'hpai',
                    width: '180',
                },
                {
                    label: 'HP（专家）',
                    prop: 'hpexpertAdvice',
                    width: '180',
                },
                {
                    label: '异性增生（AI）',
                    prop: 'alienGrowthAi',
                    width: '180',
                },
                {
                    label: '异性增生（专家）',
                    prop: 'alienGrowthExpertAdvice',
                    width: '180',
                },
                {
                    label: '备注',
                    prop: 'remark',
                    width: '180',
                },
            ],
            EvaluationFormFilter: {
                pathologyId: this.$route.query.pathologyId,
                biopsyId: this.$route.query.biopsyId,
            },
            AIEvaluationForm: {
                pathologyId: '',
                biopsyId: '',
                sliceName: '',
                masculineAi: '',
                expertAdvice: '',
                remark: '',
                chronicInflammationAi: '',
                chronicInflammationExpertAdvice: '',
                imAi: '',
                imExpertAdvice: '',
                atrophyAi: '',
                atrophyExpertAdvice: '',
                activityAi: '',
                activityExpertAdvice: '',
                hpai: '',
                hpexpertAdvice: '',
                alienGrowthAi: '',
                alienGrowthExpertAdvice: '',
                evaluateExpert: '',
                evaluateTime: '',
                radio: '',
                other: '',
            },
            freezeTypeList: [], //冰冻类型字典
            AIEvaluationFormList: {
                expertAdviceList: [],
                yinyangOpinion: [
                    {
                        name: '阴性',
                        id: 0,
                    },
                    {
                        name: '阳性',
                        id: 1,
                    },
                ],
            },

            qualityEvaluationForm: {
                biopsyQuality: '',
                scanDefinition: '',
                scanNumber: '', //切片号
                serialNumber: '', //切片序号
                currentSerialNumber: '', //当前第几张/共多少张
                biopsyId: this.$route.query.biopsyId,
            },
            qualityEvaluationShow: false,
            dictionaryMap: [
                {
                    code: 'sliceQuality',
                    array: 'biopsyQualityList',
                },
                {
                    code: 'scanningQuality',
                    array: 'scanQualityList',
                },
                {
                    code: 'countOfTransferPostiveToNegative',
                    array: 'countOfTransferPostiveToNegativeList',
                },
            ],
            biopsyQualityList: [],
            scanQualityList: [],
            countOfTransferPostiveToNegativeList: [],

            btnSureShow: true,
            changeColor: -1,
            hotkey: false,
            visibleDict: {
                patienterList: false, //诊断列表
                patienterDetail: false, // 诊断详情
                AIEvaluationDialogList: false, //AI分析列表
                isShowSliceInfoStatus: false, // 切片信息
                AIEvaluationDialog: false, //AI分析准确性评价
                annotationsWarn: false, //画笔标注
            },
            pathologyServiceURL: process.env.pathologyServiceURL,
            AnnotationsServiceURL: process.env.pathologyServiceURL,
            ImageServiceURL: process.env.ImageServiceURL,
            info: '', //病人信息
            aiAnnotationsData: [],
            annotationsData: [],
            pencilActive: false,
            polygonActive: false,
            rectangleActive: false,
            measureDistanceActive: false,
            measureAreaActive: false,
            flag: true,
            timer: null,
            timerOne: null,
            viewerAngle: 0,
            viewerAngleCopy: 90,
            viewZoomNumber: 1,
            annDialogVisible: false,

            diagnosisIdMock: 0,
            updateAnnInfo: {
                annotationId: '',
                width: '',
                height: '',
                saveUserName: '',
                createAt: '',
                area: '',
            },
            showleftPic: true,
            diagnosisId: null,
            loading: false,
            previousBiopsyId: null,
            nextBiopsyId: null,
            ifOpenseadragon: true,
            pathologyId: this.$route.query.pathologyId,
            isEvaluate: this.$route.query.isEvaluateValue,
            queryPathologyId: this.$route.query.queryPathologyId,
            collectionAnnotationImages: null,
            annotationImages: [],
            initWidth: 0,
            initHeight: 0,
            initX: 0,
            initY: 0,
            isActive: 0,
            diagnosticBasisData: {
                showStatus: false,
                data: null,
                ourConclusion: '',
                tableData: [],
                name: '',
                sex: '',
                age: '',
                height: '',
                weight: '',
                suspicious: '高度可疑',
            },
        };
    },

    methods: {
        //先写后面要重新整合开始
        getElectronicMedical() {
            const { state } = this.$store;
            const { pathologyId } = state.diagnosis;
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/outpatientWithHospital/getAll/by/${pathologyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    const electronicMedicalData = res.data;
                    this.getNLPDiagnosis(electronicMedicalData.hospital[0].id);
                    this.getPatientTableInfo();
                }
            });
        },
        getNLPDiagnosis(pId) {
            this.$axios({
                method: 'GET',
                //url: `/PROXY-Remote/diagnosticBasis/get/by/0761531b293d973edbaf8eb7e6941793/${pathologyId}`,
                url: `/PROXY-Remote/diagnosticBasis/test/get/by/${pId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    if (res.data.data) {
                        let labelData = {};
                        Object.keys(this.diagnosticBasisData).forEach(
                            (item) => {
                                if (item !== 'showStatus') {
                                    this.diagnosticBasisData[item] =
                                        res.data.data[item];
                                }
                            }
                        );
                        Object.keys(res.data.data).forEach((item) => {
                            const labelItem = item.split('label');
                            if (labelItem.length === 2) {
                                labelData[labelItem[1]] = parseInt(
                                    res.data.data[item]
                                );
                            }
                        });
                        this.diagnosticBasisData.data = labelData;
                        this.diagnosticBasisData.ourConclusion =
                            res.data.data.conclusions;
                    }
                }
            });
        },
        getPatientTableInfo() {
            const that = this;
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/inspectionInformation/get/by/organId',
                params: {
                    page: 1,
                    size: 200,
                },
            }).then(function (res) {
                if (res.data.code !== 200) {
                    throw new Error(res.data);
                } else {
                    that.diagnosticBasisData.tableData = res.data.data;
                }
            });
        },
        //先写后面要重新整合结束
        //切片重扫      请求后此切片会从服务器文件夹里删除，但是记录仍在
        sliceRescan() {
            this.$confirm(
                '如果重扫切片，此切片将删除，此条诊断记录不会出现在任务列表内，等扫描员将此切片补扫成功后，此条诊断记录会自动出现在任务列表。需要通知扫描员重新扫描此切片吗？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    let mData = {
                        biopsyId: this.newBiopsyid,
                        sliceQualityStatus: 2,
                        scanDefinition: '需重扫',
                    };
                    this.$axios({
                        method: 'POST',
                        url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
                        data: mData,
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success('已通知扫描员重扫此切片');
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重扫',
                    });
                });
        },
        //根据切片id拿到切片信息
        getSliceInfoInfo(biopsyId) {
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/biopsy/sliceQualityEvaluateSingleBiopsyInformation/${biopsyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.SliceInfoData = res.data.data[0];
                    this.qualityEvaluationForm.serialNumber = '';
                } else {
                    this.$message.info(res.data.message);
                }
            });
        },
        //准确阴阳性判断
        correctYinYang() {
            this.AIEvaluationForm.expertAdvice =
                this.AIEvaluationForm.masculineAi;
            this.putExpertOpinion();
        },
        //错误阴阳性判断
        errorYinYang() {
            if (this.AIEvaluationForm.masculineAi == '阳性') {
                this.AIEvaluationForm.expertAdvice = '阴性';
            } else if (this.AIEvaluationForm.masculineAi == '阴性') {
                this.AIEvaluationForm.expertAdvice = '阳性';
            } else {
                this.AIEvaluationForm.expertAdvice = '';
            }
            this.putExpertOpinion();
        },
        //医生第一次打开病人切片浏览器的时间
        doctorOpenViewerTime(pBiopsyid) {
            this.$axios({
                methods: 'GET',
                url: `/PROXY-Remote/biopsy/recordStartDiagnosisTime/${pBiopsyid}/${this.$route.query.userId}`,
            }).then((res) => {
                console.log('打开切片浏览器', res);
            });
        },
        //医生最后提交评价的时间
        doctorSubmitEvaluationTime(pBiopsyid) {
            this.$axios({
                methods: 'GET',
                url: `/PROXY-Remote/biopsy/recordEndDiagnosisTime/${pBiopsyid}/${this.$route.query.userId}`,
            }).then((res) => {
                console.log('提交评价', res);
            });
        },

        //扫描员此切片需要重扫
        rescan() {
            let mData = {
                biopsyId: this.newBiopsyid,
                sliceQualityStatus: 2,
                scanDefinition: '需重扫',
            };
            this.$axios({
                method: 'POST',
                url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success('提交重新扫描成功');
                    this.scanerNext();
                }
            });
        },
        getBiopsyAssess(biopsyId) {
            this.$axios({
                method: 'get',
                url: `/biopsy/findByIdOfSliceQualityEvaluate/${biopsyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.qualityEvaluationForm.biopsyQuality =
                        res.data.data.biopsyQuality || '';
                    this.qualityEvaluationForm.scanDefinition =
                        res.data.data.scanDefinition || '';
                    this.labelUrl = res.data.data.labelUrl || '';
                }
            });
        },
        //切片质量可以 直接通过提交并跳到下一张
        scanQualityPass() {
            let mData = {
                biopsyId: this.newBiopsyid,
                biopsyQuality: '甲',
                scanDefinition: '甲',
            };
            this.$axios({
                method: 'POST',
                url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success('提交成功');
                    this.scanerNext();
                }
            });
        },
        //扫描员提交切片质量
        submitEvaluate() {
            let mData = {
                biopsyId: this.newBiopsyid,
                biopsyQuality: this.qualityEvaluationForm.biopsyQuality,
                scanDefinition: this.qualityEvaluationForm.scanDefinition,
            };
            if (mData.scanDefinition === '需重扫') {
                mData.sliceQualityStatus = 2;
            }
            this.$axios({
                method: 'POST',
                url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success('提交成功');
                    this.getSliceInfoInfo(this.newBiopsyid);
                }
            });
        },
        search() {
            this.getAIEvaluationList();
        },
        watchDetail(row) {
            this.btnSureShow = false;
            this.$axios({
                method: 'get',
                url: `/PROXY-Remote/evaluate/get/${row.id}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.AIEvaluationForm = res.data.data;
                    this.visibleDict.AIEvaluationDialog = true;
                }
            });
        },
        exampleTableButtonClick(functionKey, row) {
            this[functionKey](row);
        },
        exampleTablePageJumpTo(val) {
            this.pageInfo.page = val;
            // 为 exampleTable.data 赋值相应页上新数据
            this.getAIEvaluationList();
        },
        exampleTableSizeChange(val) {
            this.pageInfo.size = val;
            // 为 exampleTable.data 赋值相应数据量新数据
            this.getAIEvaluationList();
        },
        getAIEvaluationList() {
            this.$axios({
                method: 'post',
                url: '/PROXY-Remote/evaluate/findAll',
                data: {
                    page: this.pageInfo.page - 1,
                    size: this.pageInfo.size,
                    biopsyId: this.EvaluationFormFilter.biopsyId,
                    pathologyId: this.EvaluationFormFilter.pathologyId,
                },
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.AIEvaluationDialogListTableData = res.data.data;
                    this.pageInfo.page = res.data.pageInfo.page + 1;
                    this.pageInfo.size = res.data.pageInfo.size;
                    this.pageInfo.total = res.data.pageInfo.total;
                }
            });
        },
        copyAiAnalysis() {
            this.AIEvaluationForm.expertAdvice =
                this.AIEvaluationForm.masculineAi;
            this.AIEvaluationForm.chronicInflammationExpertAdvice =
                this.AIEvaluationForm.chronicInflammationAi;
            this.AIEvaluationForm.imExpertAdvice = this.AIEvaluationForm.imAi;
            this.AIEvaluationForm.atrophyExpertAdvice =
                this.AIEvaluationForm.atrophyAi;
            this.AIEvaluationForm.activityExpertAdvice =
                this.AIEvaluationForm.activityAi;
            this.AIEvaluationForm.hpexpertAdvice = this.AIEvaluationForm.hpai;
            this.AIEvaluationForm.alienGrowthExpertAdvice =
                this.AIEvaluationForm.alienGrowthAi;
            this.putExpertOpinion();
        },
        dictionariesRequest(dictMap) {
            // 字典数据请求
            dictMap.forEach(async (map) => {
                const res = await this.$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/dicts/list',
                    params: {
                        code: map.code,
                        page: 0,
                        size: 99,
                    },
                });

                if (res && res.data.code === 200) {
                    const result = res.data;
                    result.data.forEach((t) => {
                        this[map.array].push({
                            id: t.id,
                            label: t.name,
                        });
                    });
                }
            });
        },
        putExpertOpinion() {
            let _this = this;
            if (
                this.AIEvaluationForm.expertAdvice == '阳性' &&
                this.AIEvaluationForm.radio == ''
            ) {
                this.$message.info('请选择专家诊断');
                return;
            }
            this.AIEvaluationForm.biopsyId = this.biopsyId;
            this.$axios({
                method: 'put',
                url: '/PROXY-Remote/evaluate/save',
                data: this.AIEvaluationForm,
            }).then(
                (res) => {
                    if (res && res.data.code === 200) {
                        this.visibleDict.AIEvaluationDialog = false;
                        this.$message.info('提交成功');
                        this.getAIEvaluationList();
                        this.doctorSubmitEvaluationTime(_this.biopsyId);
                    } else {
                        this.$message.info(res.data.message);
                    }
                },
                (err) => {
                    this.$message.info(
                        `提交失败  ${err.response.data.message}`
                    );
                }
            );
        },

        expertOpinion() {
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/dicts/list',
                params: {
                    code: 'expertAdvice',
                    page: 0,
                    size: 99,
                },
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.AIEvaluationFormList.expertAdviceList = res.data.data;
                }
            });
        },
        closeAIDialog() {
            this.visibleDict.AIEvaluationDialog = false;
            this.changeColor = -1;
            const _this = this;
            document.addEventListener('keydown', _this.watchEnter);
        },
        closeExperimentDialog() {},
        closeAIEvaluationDialog() {
            this.visibleDict.AIEvaluationDialog = false;
            this.changeColor = -1;
        },
        annotationSelect(item) {
            let _this = this;
            _this.$refs.AIFloatingREF.locatedToParticularIndex(item);
        },
        becomeFullScreen() {
            if (this.isFullScreen) {
                this.isFullScreen = false;
            } else {
                this.isFullScreen = true;
            }
        },
        pictureToolPanelShow(type) {
            if (type == 1) {
                this.isSlicePanelShow = !this.isSlicePanelShow;
                this.isColorPanelShow = false;
                this.isPencilPanelShow = false;
                this.isSwitchPanelShow = false;
            }
            if (type == 2) {
                this.isSlicePanelShow = false;
                this.isColorPanelShow = false;
                this.isSwitchPanelShow = false;
                this.isPencilPanelShow = !this.isPencilPanelShow;
            }
            if (type == 3) {
                this.isSlicePanelShow = false;
                this.isColorPanelShow = !this.isColorPanelShow;
                this.isPencilPanelShow = false;
                this.isSwitchPanelShow = false;
            }

            if (type == 4) {
                this.isSlicePanelShow = false;
                this.isColorPanelShow = false;
                this.isPencilPanelShow = false;
                this.isSwitchPanelShow = !this.isSwitchPanelShow;
            }
        },
        //对比度调节事件
        onContrastSlideChange(e) {
            this.coordinateColor.gama = 100;
            this.coordinateColor.light = 50;
            this.$refs.openseadragon.onContrastSlideChange(e);
        },
        //亮度调节事件
        onLightSlideInput(e) {
            this.coordinateColor.contrast = 100;
            this.coordinateColor.gama = 100;
            this.$refs.openseadragon.onLightSlideInput(e);
        },
        //gama调节事件
        onGamaSlideInput(e) {
            this.coordinateColor.contrast = 100;
            this.coordinateColor.light = 50;
            this.$refs.openseadragon.onGamaSlideInput(e);
        },
        //red调节事件
        onRedSlideInput(e) {},
        //yellow调节事件
        onYellowSlideInput(e) {},
        //blue调节事件
        onBlueSlideInput(e) {},
        //查询单个切片的阴性和阳性，AI智能预测的可疑点
        yinYangStatus(biopsyId) {
            let _this = this;
            this.$axios({
                method: 'GET',
                url: `${this.AnnotationsServiceURL}/annotations/results/aiprediction/${biopsyId}`,
            }).then((res) => {
                if (res.data.code === 200) {
                    // 数据处理
                    let predTxt = res.data.data.info.pred;
                    this.biopsyList[0].pred = predTxt;
                    if (_this.transferPositiveToNegative(res.data.data)) {
                        predTxt = 0;
                    }
                    this.yinYangIcons.push({
                        id: biopsyId,
                        pred: predTxt,
                    });
                }
            });
        },

        __clearAllDrawingTools() {
            if (this.pencilActive) {
                this.pencilActive = false;
                this.$refs.openseadragon.beginPencilDrawing(this.pencilActive);
            }
            if (this.polygonActive) {
                this.polygonActive = false;
                this.$refs.openseadragon.beginPolygonDrawing(this.pencilActive);
            }
            if (this.rectangleActive) {
                this.rectangleActive = false;
                this.$refs.openseadragon.beginRectangleDrawing(
                    this.rectangleActive
                );
            }
            if (this.measureDistanceActive) {
                this.measureDistanceActive = false;
                this.$refs.openseadragon.beginMeasuringDistance(
                    this.measureDistanceActive
                );
            }
            if (this.measureAreaActive) {
                this.measureAreaActive = false;
                this.$refs.openseadragon.beginMeasuringArea(
                    this.measureAreaActive
                );
            }
        },
        togglePencilLine() {
            if (this.changeColor === 22) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 22;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '涂抹',
                    });
                }
                this.$refs.openseadragon.beginPencilLineDrawing(
                    this.pencilActive
                );
            }
        },
        toggleArrow() {
            if (this.changeColor === 23) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 23;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '箭头',
                    });
                }
                this.$refs.openseadragon.beginArrowDrawing(this.pencilActive);
            }
        },
        togglePencil() {
            if (this.changeColor === 5) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 5;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '铅笔',
                    });
                }
                this.$refs.openseadragon.beginPencilDrawing(this.pencilActive);
            }
        },
        toggleCircle() {
            if (this.changeColor === 21) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 21;
                this.__clearAllDrawingTools();
                this.pencilActive = !this.pencilActive;
                if (this.pencilActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '圆形',
                    });
                }
                this.$refs.openseadragon.beginCircleDrawing(this.pencilActive);
            }
        },
        togglePolygon() {
            if (this.changeColor === 7) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 7;
                this.__clearAllDrawingTools();
                this.polygonActive = !this.polygonActive;
                if (this.polygonActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '铅笔',
                    });
                }
                this.$refs.openseadragon.beginPolygonDrawing(
                    this.polygonActive
                );
            }
        },
        toggleRectangle() {
            if (this.changeColor === 6) {
                this.changeColor = -1;
                this.cancelAnn();
            } else {
                this.changeColor = 6;
                this.__clearAllDrawingTools();
                this.rectangleActive = !this.rectangleActive;
                if (this.rectangleActive) {
                    this.$refs.openseadragon.changeDrawClass({
                        color: '#b31a1a',
                        name: '矩形',
                    });
                }

                this.$refs.openseadragon.beginRectangleDrawing(
                    this.rectangleActive
                );
            }
        },
        toggleMeasureDistance() {
            if (this.changeColor === 9) {
                this.changeColor = -1;
                this.__clearAllDrawingTools();
            } else {
                this.changeColor = 9;
                this.__clearAllDrawingTools();
                this.measureDistanceActive = !this.measureDistanceActive;
                this.$refs.openseadragon.beginMeasuringDistance(
                    this.measureDistanceActive
                );
            }
        },
        openseadragonOpen() {
            let _this = this;
            // setTimeout(function () {
            //   if (this.drawer) {
            //     _this.$refs.AIFloatingREF.locatedToFirstAnno();
            //   }
            // }, 2000);
        },
        toggleMeasureArea() {
            if (this.changeColor === 10) {
                this.changeColor = -1;
                this.__clearAllDrawingTools();
            } else {
                this.changeColor = 10;
                this.__clearAllDrawingTools();
                this.measureAreaActive = !this.measureAreaActive;
                this.$refs.openseadragon.beginMeasuringArea(
                    this.measureAreaActive
                );
            }
        },
        clearMeasure() {
            if (this.changeColor === 11) {
                this.changeColor = -1;
            } else {
                this.changeColor = 11;
                this.$refs.openseadragon.removeAllMeasureAnnotations();
                this.__clearAllDrawingTools();
                this.$refs.openseadragon.panToggle(true);
            }
        },
        goHome() {
            if (this.changeColor === 17) {
                this.changeColor = -1;
            } else {
                this.changeColor = 17;
                this.$refs.openseadragon.goHome();
            }
        },
        hideCallout() {
            if (!this.ifhideCallout) {
                this.changeColor = 8;
                this.ifhideCallout = true;
                this.annotationsDataInit = [];
            } else {
                this.ifhideCallout = false;
                this.changeColor = -1;
                this.annotationsDataInit = this.annotationsData;
            }
        },
        rotateRight() {
            this.changeColor = 18;
            if (this.viewerAngleCopy) {
                this.viewerAngle += this.viewerAngleCopy;
            } else {
                this.viewerAngle += 5;
            }
            this.viewerAngle %= 360;
            this.$refs.openseadragon.setRotation(this.viewerAngle);
        },
        rotateLeft() {
            this.changeColor = 19;
            if (this.viewerAngleCopy) {
                this.viewerAngle -= this.viewerAngleCopy;
            } else {
                this.viewerAngle -= 5;
            }
            this.viewerAngle %= 360;
            this.$refs.openseadragon.setRotation(this.viewerAngle);
        },
        // 右侧AI智能预测开关
        drawerAi() {
            if (!this.drawer && this.switchValue.AIAnalysis) {
                this.changeColor = 12;
                this.getAIAnnotations();
            } else {
                this.changeColor = -1;
                this.aiAnnotationsData = [];
                // AI定时器清除
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        AIEvaluationClose() {
            this.visibleDict.AIEvaluationDialogList = false;
            this.changeColor = -1;
            document.addEventListener('keydown', this.watchEnter);
        },
        AIEvaluation() {
            if (this.visibleDict.AIEvaluationDialogList) {
                this.visibleDict.AIEvaluationDialogList = false;
                this.changeColor = -1;
                document.addEventListener('keydown', this.watchEnter);
            } else {
                this.changeColor = 24;
                this.visibleDict.AIEvaluationDialogList = true;
                this.getAIEvaluationList();
                document.removeEventListener('keydown', this.watchEnter);
            }
        },
        isShowSliceInfo() {
            if (this.visibleDict.isShowSliceInfoStatus) {
                this.visibleDict.isShowSliceInfoStatus = false;
                document.addEventListener('keydown', this.watchEnter);
                this.changeColor = -1;
            } else {
                this.changeColor = 33;
                this.visibleDict.isShowSliceInfoStatus = true;
                document.removeEventListener('keydown', this.watchEnter);
            }
        },
        isShowDiagnosticBasis() {
            if (this.diagnosticBasisData.showStatus) {
                this.diagnosticBasisData.showStatus = false;
                this.changeColor = -1;
            } else {
                this.changeColor = 34;
                this.diagnosticBasisData.showStatus = true;
                this.getElectronicMedical();
            }
        },
        AIEvaluationDialogShow() {
            if (this.visibleDict.AIEvaluationDialog) {
                this.visibleDict.AIEvaluationDialog = false;
                document.addEventListener('keydown', this.watchEnter);
            } else {
                Object.keys(this.AIEvaluationForm).forEach((key) => {
                    if (
                        key == 'chronicInflammationAi' ||
                        key == 'masculineAi' ||
                        key == 'imAi' ||
                        key == 'atrophyAi' ||
                        key == 'activityAi' ||
                        key == 'hpai' ||
                        key == 'alienGrowthAi' ||
                        key == 'pathologyId' ||
                        key == 'evaluateExpert' ||
                        key == 'sliceName'
                    ) {
                    } else {
                        this.AIEvaluationForm[key] = '';
                    }
                });
                this.AIEvaluationForm.pathologyId = this.pathologyId;
                this.AIEvaluationForm.evaluateExpert = this.userName;
                this.visibleDict.AIEvaluationDialog = true;
                document.removeEventListener('keydown', this.watchEnter);
                this.btnSureShow = true;
                this.$axios({
                    method: 'GET',
                    url: `/PROXY-Remote/evaluate/get/by/biopsy/${this.biopsyId}`,
                }).then(
                    (res) => {
                        if (res.data.data && res.data.code === 200) {
                            this.AIEvaluationForm = res.data.data;
                        }
                    },
                    (err) => {
                        this.$message.info(err.response.data.message);
                    }
                );
            }
        },
        analysisAI() {
            if (this.Ifanalysis) {
                this.Ifanalysis = false;
                this.changeColor = -1;
            } else {
                this.changeColor = 20;
                this.Ifanalysis = true;
            }
        },
        patienterListMethod() {
            this.changeColor = 2;
            this.visibleDict.patienterList = true;
            const _this = this;
            document.removeEventListener('keydown', _this.watchEnter);
        },
        DiagnosisListclosed() {
            this.visibleDict.patienterList = false;
            this.changeColor = -1;
            const _this = this;
            document.addEventListener('keydown', _this.watchEnter);
        },
        patienterDetailMethod() {
            this.changeColor = 4;
            this.visibleDict.patienterDetail = true;
            const _this = this;
            document.removeEventListener('keydown', _this.watchEnter);
        },
        patienterDetailclosed() {
            this.visibleDict.patienterDetail = false;
            this.changeColor = -1;
            const _this = this;
            document.addEventListener('keydown', _this.watchEnter);
        },
        selectStyle(item) {
            const _this = this;
            this.$nextTick(function () {
                this.annotationsData.forEach((item1) => {
                    _this.$set(item1, 'active', false);
                });
                // this.$set(item, "active", true);
            });
        },
        outStyle(item) {
            this.$set(item, 'active', false);
        },
        hotkeyMethods() {
            this.changeColor = 16;
            this.hotkey = true;
        },
        hotkeyclosed() {
            this.changeColor = -1;
            this.hotkey = false;
        },
        updateDiagnoseCollection(diagnosisId) {
            this.collectionDignosis.addOrUpdate(
                this.$route.query.userId,
                {
                    diagnosisId,
                },
                true
            );
        },

        getBiopsyCopy(id) {
            if (id) {
                this.$axios({
                    url: `/PROXY-Remote/biopsy/findAllBiopsy/doctorAiEvaluate/by/biopsyId`,
                    method: 'POST',
                    data: {
                        isEvaluate: this.isEvaluate,
                        biopsyId: id,
                        queryPathologyId: this.queryPathologyId,
                    },
                }).then((res) => {
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    }
                    // 请求成功
                    const result = res.data.data;
                    this.previousBiopsyId = result.previousBiopsyId;
                    this.nextBiopsyId = result.nextBiopsyId;
                    this.diagnosisId = result.id;
                    this.biopsyList = [
                        { previewUrl: result.previewUrl, pred: '' },
                    ];
                    this.yinYangStatus(id); //查询每个切片的阴阳性
                    this.pathologyId = result.pathologyId;
                    sessionStorage.setItem('pathologyId', result.pathologyId);
                    if (this.collectionDignosis) {
                        this.updateDiagnoseCollection(this.pathologyId); // 发送更新请求
                    }
                    this.info = `
                        <span> 当前第 </span><span style="color:#000;font-size:18px;color:#10a1df">${
                            result.currentCountVersusTotal.split('/')[0]
                        }</span><span > 例 / 共 </span><span style="color:#000;font-size:18px;color:#10a1df">${
                        result.currentCountVersusTotal.split('/')[1]
                    }</span><span> 例 </span>&nbsp&nbsp
                        病理号:${result.pathologyId}&nbsp&nbsp
                        <font style="padding: 0 4px; color: #F56C6C;"> ${
                            result.name ? result.name : '暂无'
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${
                            result.sexName ? result.sexName : '暂无'
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${
                            result.age ? result.age : '暂无'
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${
                            result.ageUnitName && result.age
                                ? result.ageUnitName
                                : ''
                        }</font>
                        <font style="padding: 0 4px;">${
                            result.bedId ? result.bedId : ''
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;"> ${
                            result.freezeTypeName ? result.freezeTypeName : ''
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;"> ${
                            result.checkCategoryName
                                ? result.checkCategoryName
                                : ''
                        }</font>
                        送检单位: ${
                            result.bedId ? result.bedId : '暂无'
                        }&nbsp&nbsp
                        取材脏器:${
                            result.sampleOrganName
                                ? result.sampleOrganName
                                : '暂无'
                        } &nbsp&nbsp
                        送检医生:${
                            result.sendDoctor ? result.sendDoctor : '暂无'
                        }&nbsp&nbsp
                        送检科室: 暂无 &nbsp&nbsp
                        临床诊断:${
                            result.pathologyClinicalDiagnosis
                                ? result.pathologyClinicalDiagnosis
                                : '暂无'
                        }
                        &nbsp&nbsp
                        状态:${
                            result.currentLevelLabel
                                ? result.currentLevelLabel
                                : '暂无'
                        }&nbsp&nbsp
                        取材时间:${
                            result.createTime ? result.createTime : '暂无'
                        }&nbsp&nbsp
                        `;
                    // 通过切片获取标注
                    if (id) {
                        this.getAnnotations(
                            id,
                            result.newFilename,
                            result.originFilename,
                            result.labelUrl
                        );
                        // 打开切片
                        this.$refs.openseadragon.open(
                            `${this.pathologyServiceURL}/images/${result.newFilename}.dzi`
                        );
                        this.ifOpenseadragon = true;
                    } else {
                        this.ifOpenseadragon = false;
                        this.labelUrl = '';
                        this.annotationsDataInit = [];
                        this.annotationsData = [];
                        this.$message.info('该诊断无切片');
                    }
                });
            }
        },
        // 界面左侧，  点击获取标注 biopsyID切片Id 切片新名字 切片老名字 切片信息图片url
        getAnnotations(
            biopsyID,
            biopsyfileName,
            biopsyOriginFilename,
            labelUrl,
            index
        ) {
            this.$refs.openseadragon.open(
                `${this.pathologyServiceURL}/images/${biopsyfileName}.dzi`
            );
            this.annotationsDataInit = [];
            this.annotationsData = [];
            if (biopsyfileName !== null && biopsyOriginFilename !== null) {
                this.biopsyId = biopsyID;
                this.biopsyOriginFilename = biopsyOriginFilename;
                this.labelUrl = labelUrl;
                if (this.drawer) {
                    this.getAIAnnotations();
                }
            }
            try {
                this.$axios({
                    method: 'GET',
                    url: `/PROXY-Remote/biopsy/single/${biopsyID}`,
                }).then((resp) => {
                    // 请求失败
                    if (resp.data.code !== 200) {
                        throw new Error(resp.data);
                    }
                    // 请求成功
                    this.AIEvaluationForm.sliceName =
                        resp.data.data.originFilename;
                    this.getSliceInfoInfo(biopsyID);
                    // 数据处理
                    resp.data.data.annotationsList.forEach((ele) => {
                        const temPoints = [];
                        const areaInfo = {
                            width: ele.extraMessageJson
                                ? (
                                      ele.extraMessageJson.width * 1000000
                                  ).toFixed(3)
                                : '',
                            height: ele.extraMessageJson
                                ? (
                                      ele.extraMessageJson.height * 1000000
                                  ).toFixed(3)
                                : '',
                            area: ele.extraMessageJson
                                ? (
                                      ele.extraMessageJson.area *
                                      1000000 *
                                      1000000
                                  ).toFixed(3)
                                : '',
                        };
                        ele.pointsJson.forEach((item) => {
                            const coord1 = ['points', item[0], item[1]];
                            temPoints.push(coord1);
                        });
                        const object = {
                            annotationId: ele.id,
                            createAt: ele.createTime,
                            saveUser: ele.createUserId,
                            remarkOne: ele.remarkOne,
                            remarkTwo: ele.remarkTwo,
                            classToSet: {
                                color: '#b31a1a',
                                name: '胃癌',
                            },
                            points: temPoints,
                            name: '胃癌',
                            children: ele.childrenJson,
                            show: true,
                            saveUserName: ele.createUserName,
                            type: ele.extraMessageJson.type,
                            imageUrl: this.ImageServiceURL + ele.imageUrl,
                            extraMessageJson: ele.extraMessageJson,
                            areaInfo,
                        };
                        this.annotationsData.push(object);
                        this.annotationsDataInit = _.cloneDeep(
                            this.annotationsData
                        );
                    });
                    this.collectionAnnotationImages.addOrUpdate(
                        this.$route.query.userId,
                        {
                            annotationsData: this.annotationsData,
                        },
                        true
                    );
                });
                this.drawerAi();
            } catch (e) {
                // 跳出
            }
        },
        annotationDrawingEnd(annotations) {
            annotations.forEach((temp) => {
                if (!temp.show) {
                    this.newannotations.push(temp);
                    this.visibleDict.annotationsWarn = true;
                }
            });
        },
        // 1.画画工具画笔标注， 标注完成后， 删除标注的时候触发， 2. 跳转
        aiAnnotationDrawingEnd(AIannotations) {
            if (AIannotations.length > 0) {
                AIannotations.forEach((item, index) => {
                    item['inIndex'] = index + 1;
                });
                this.AIdata = AIannotations;
                this.drawer = true;
                this.currentSuspicious = this.AIdata[0];
            } else {
                this.drawer = false;
            }
        },
        //  画画工具画笔标注， 点击他的时候触发
        uploadAnnotation(annotation) {
            const { x, y, width, height } =
                annotation.option.type == 'circle'
                    ? annotation.circlePath.bounds
                    : annotation.path.bounds;
            const imgURL = this.$refs.openseadragon.getImage(
                x,
                y,
                width,
                height
            );

            const MIME_TYPE = 'image/png';
            const dlLink = document.createElement('a');
            this.newPic = imgURL;
            dlLink.href = imgURL;
            dlLink.dataset.downloadurl = [
                MIME_TYPE,
                dlLink.download,
                dlLink.href,
            ].join(':');

            document.body.appendChild(dlLink);
            dlLink.click();
            document.body.removeChild(dlLink);
        },
        jumpToNumber(val) {
            this.$axios({
                method: 'get',
                url: `/PROXY-Remote/biopsy/id/by/rank/`,
                params: {
                    isEvaluate: this.isEvaluate,
                    queryPathologyId: this.queryPathologyId,
                    rank: val,
                },
            }).then(
                (res) => {
                    if (res && res.data.code === 200) {
                        this.getBiopsyCopy(res.data.data);
                    }
                },
                (err) => {
                    this.$message.info(`${err.response.data.message}`);
                }
            );
        },
        // 取消标注
        cancelAnn() {
            this.__clearAllDrawingTools();
            this.$refs.openseadragon.panToggle(true);
        },
        Submit() {
            if (!this.validateForm()) {
                return;
            }
            this.visibleDict.annotationsWarn = false;
            this.uploadPic(this.newPic);
        },
        // 提交标注
        submitAnnotation(uploadPictTemp) {
            const temp = this.newannotations[this.newannotations.length - 1];
            const pointsTmp = [];
            const Annotationinfo = {
                minX: temp.data.minX,
                minY: temp.data.minY,
                pixelsWidth: temp.data.pixelsWidth,
                pixelsHeight: temp.data.pixelsHeight,
                pixelsArea: temp.data.pixelsArea,
                width: temp.data.width,
                height: temp.data.height,
                area: temp.data.area,
                type: temp.option.type,
            };
            temp.points.forEach((ele) => {
                pointsTmp.push([ele.x, ele.y]);
            });
            const postdata = {
                points: JSON.stringify(pointsTmp),
                children: JSON.stringify([]),
                diagnosisId: this.diagnosisId,
                imageUrl: uploadPictTemp,
                extraMessage: JSON.stringify(Annotationinfo),
                remarkOne: this.mark.warning,
                remarkTwo: this.mark.remark,
            };
            try {
                this.$axios({
                    method: 'post',
                    // url: `/PROXY-Remote/biopsy/${this.biopsyId}/annotations`,
                    url: `/PROXY-Remote/annotations/biopsy/${this.biopsyId}/annotations`,
                    data: postdata,
                    headers: {
                        'Content-Type': 'application/json',
                        authorization: this.$store.state.authorization,
                    },
                }).then(
                    (res) => {
                        if (res && res.data.code === 200) {
                            console.log(res);
                            this.newannotations = [];
                            this.mark.warning = '';
                            this.mark.remark = '';
                            const areaInfo = {
                                width: res.data.data.extraMessageJson
                                    ? (
                                          res.data.data.extraMessageJson.width *
                                          1000000
                                      ).toFixed(3)
                                    : '',
                                height: res.data.data.extraMessageJson
                                    ? (
                                          res.data.data.extraMessageJson
                                              .height * 1000000
                                      ).toFixed(3)
                                    : '',
                                area: res.data.data.extraMessageJson
                                    ? (
                                          res.data.data.extraMessageJson.area *
                                          1000000 *
                                          1000000
                                      ).toFixed(3)
                                    : '',
                            };
                            const temPoints = [];
                            res.data.data.pointsJson.forEach((item) => {
                                const coord1 = ['points', item[0], item[1]];
                                temPoints.push(coord1);
                            });
                            const object = {
                                annotationId: res.data.data.id,
                                createAt: res.data.data.createTime,
                                saveUser: res.data.data.createUserId,
                                remarkOne: res.data.data.remarkOne,
                                remarkTwo: res.data.data.remarkTwo,
                                points: temPoints,
                                classToSet: {
                                    color: '#b31a1a',
                                    name: '胃癌',
                                },
                                name: '胃癌',
                                show: true,
                                saveUserName: res.data.data.createUserName,
                                type: 'polygon',
                                imageUrl:
                                    this.ImageServiceURL +
                                    res.data.data.imageUrl,
                                extraMessageJson:
                                    res.data.data.extraMessageJson,
                                areaInfo,
                            };
                            this.annotationsData.push(object);
                            this.collectionAnnotationImages.addOrUpdate(
                                this.$route.query.userId,
                                {
                                    annotationsData: this.annotationsData,
                                },
                                true
                            );
                        }
                    },
                    (err) => {
                        this.newannotations = [];
                        this.mark.warning = '';
                        this.mark.remark = '';
                        this.$message.info(
                            `新增失败 ${err.response.data.message}`
                        );
                    }
                );
            } catch (e) {
                console.log('请求失败');
            }
        },
        // 上传切片图片
        uploadPic(imgBase) {
            try {
                const data1 = { imgBase64: imgBase };
                this.$axios({
                    method: 'post',
                    // url: "/PROXY-annotationPicService/base/upload",
                    url: `${this.ImageServiceURL}/base/upload`,
                    data: qs.stringify(data1),
                    headers: {
                        defaultHeader: false,
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                }).then(
                    (res) => {
                        if (res.data.status === 'success') {
                            const uploadPictTemp = res.data.url.slice(
                                res.data.url.indexOf('_') - 1
                            );
                            console.log('upload success', res.data.url);
                            console.log('uploadPictTemp', uploadPictTemp);
                            this.annotationImages.push(res.data.url);
                            this.submitAnnotation(uploadPictTemp);
                        }
                    },
                    (err) => {
                        this.$message.info(
                            `标注图新增失败${err.response.data}`
                        );
                    }
                );
            } catch (e) {
                console.log('请求失败');
            }
        },
        annotationsWarnCancel() {
            this.$refs.openseadragon.panToggle(true);
            const { id } = this.newannotations[this.newannotations.length - 1];
            this.$refs.openseadragon.removeAnnotation(id);
            this.visibleDict.annotationsWarn = false;
        },
        // 全屏
        sreenFull() {
            if (
                !document.fullscreenElement &&
                !document.msFullscreenElement &&
                !document.mozFullScreenElement &&
                !document.webkitFullscreenElement
            ) {
                let docElm = document.documentElement;
                this.changeColor = 15;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                } else if (docElm.msRequestFullscreen) {
                    // IE
                    docElm = document.body; // overwrite the element (for IE)
                    docElm.msRequestFullscreen();
                } else if (docElm.mozRequestFullScreen) {
                    // 火狐
                    docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) {
                    // 谷歌
                    docElm.webkitRequestFullScreen();
                }
            } else if (document.exitFullscreen) {
                this.changeColor = -1;
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        },
        // 截图
        screenshot() {
            this.changeColor = 13;
            $('#drawRectCanvas').show();
            const shadeCs1 = document.getElementById('shadeCanvas');
            const shadeContext1 = shadeCs1.getContext('2d');
            // 填充页面覆盖色
            shadeContext1.fillStyle = 'rgba(43, 42, 42, 0.5)';
            shadeContext1.fillRect(0, 0, shadeCs1.width, shadeCs1.height);
            $('#shadeCanvas').show();
            const color = 'white';
            const penWidth = 1;
            const rectCanvas = document.getElementById('drawRectCanvas');
            // canvas 的矩形框
            const canvasRect = rectCanvas.getBoundingClientRect();
            // canvas 矩形框的左上角坐标
            const canvasLeft = canvasRect.left;
            const canvasTop = canvasRect.top;
            let lastWidth = 0;
            let lastHeight = 0;
            // 要画的矩形的起点 xy
            let width = 0;
            let height = 0;
            let x = 0;
            let y = 0;
            // 鼠标点击按下事件，画图准备
            rectCanvas.onmousedown = function (e) {
                // 设置遮罩层填充色
                const shadeCs = document.getElementById('shadeCanvas');
                const shadeContext = shadeCs.getContext('2d');
                // 确定起点
                x = e.clientX;
                y = e.clientY;
                // 添加layer
                $('#drawRectCanvas').addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name: 'areaLayer',
                    fromCenter: false,
                    x,
                    y,
                    width: 1,
                    height: 1,
                });
                // 绘制
                $('#drawRectCanvas').drawLayers();
                $('#drawRectCanvas').saveCanvas();
                // 鼠标移动事件，画图
                // eslint-disable-next-line no-shadow
                rectCanvas.onmousemove = function (e) {
                    lastWidth = width;
                    lastHeight = height;
                    // 要画的矩形的宽高
                    width = e.clientX - canvasLeft - x;
                    height = e.clientY - canvasTop - y;
                    shadeContext.fillRect(x, y, lastWidth, lastHeight);
                    // 清楚上一次鼠标移动画的框
                    $('#drawRectCanvas').removeLayer('areaLayer');
                    $('#drawRectCanvas').addLayer({
                        type: 'rectangle',
                        strokeStyle: color,
                        strokeWidth: penWidth,
                        name: 'areaLayer',
                        fromCenter: false,
                        x,
                        y,
                        width,
                        height,
                    });
                    $('#drawRectCanvas').drawLayers();
                    shadeContext.clearRect(x, y, width, height);
                };
            };
            const that = this;
            rectCanvas.onmouseup = function (e) {
                rectCanvas.onmousemove = null;
                width = e.clientX - canvasLeft - x;
                height = e.clientY - canvasTop - y;
                $('#drawRectCanvas').removeLayer('areaLayer');
                $('#drawRectCanvas').addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name: 'areaLayer',
                    fromCenter: false,
                    x,
                    y,
                    width,
                    height,
                });
                $('#drawRectCanvas').drawLayers();
                $('#drawRectCanvas').saveCanvas();
                $('#canvasToolbar').css('display', 'block');
                $('#canvasToolbar').css(
                    'left',
                    `${
                        width > 0
                            ? x + width
                            : Math.abs(width + x) + Math.abs(width)
                    }px`
                );
                $('#canvasToolbar').css(
                    'top',
                    `${height > 0 ? height + y : y}px`
                );
                $('#drawRectCanvas').hide();
                // 移除画的选取框
                $('#drawRectCanvas').removeLayer('areaLayer');
                // 隐藏画框的canvass
                $('#drawRectCanvas').hide();
                // 添加描述输入框
                const pr = $('#prescription');
                // 横向排列
                pr.css('display', 'flex'); // 横向排列
                pr.css('justify-content', 'center'); // 横向排列居中
                pr.css('z-index', 9999); // 浮动在最上层
                pr.css('position', 'absolute');
                pr.css('border', 'none'); // 去掉边框
                pr.css(
                    'font-size',
                    `${(Math.abs(width) / document.body.clientWidth) * 100}%`
                ); // 文字大小
                pr.css('left', `${width > 0 ? x : Math.abs(width + x)}px`);
                pr.css('top', `${height > 0 ? height + y : y}px`);
                pr.css('width', `${Math.abs(width)}px`);
                $('#prescription').on('keydown', () => {
                    if (e.keyCode === 27) {
                        // $('#screenPC').trigger('click');
                        $('#cancel').trigger('click');
                    }
                });
                $('#SCinputBox').focus(); // 描述输入框获取焦点
                // 重置描述框的内容viewZoomNumber
                $('#rate')[0].innerText = `倍率:${
                    document.getElementById('viewZoomNumber').innerText
                }`; // 倍率
                const nowDate = new Date();
                const year = nowDate.getFullYear();
                const month = `0${nowDate.getMonth() + 1}`.substr(-2, 2);
                const date = `0${nowDate.getDate()}`.substr(-2, 2);
                const hour = `0${nowDate.getHours()}`.substr(-2, 2);
                const minute = `0${nowDate.getMinutes()}`.substr(-2, 2);
                const second = `0${nowDate.getSeconds()}`.substr(-2, 2);
                $(
                    '#screenshotTime'
                )[0].innerText = `${year}-${month}-${date} ${hour}:${minute}:${second}`; // 截屏时间
                $('#SCinputBox')[0].innerText = ''; // 输入框内容置空
                // 重置信息框样式框的内容
                $('#rate').css('width', '100%');
                $('#screenshotTime').css('width', '100%');
                // 判断倍率框或者日期框的字数超过1行，则重新布局
                // eslint-disable-next-line radix
                if (
                    Math.ceil(
                        $('#rate').height() /
                            parseInt(
                                $('#rate').css('line-height').replace('px', '')
                            )
                    ) > 1 ||
                    Math.ceil(
                        $('#screenshotTime')
                            // eslint-disable-next-line radix
                            .height() /
                            parseInt(
                                $('#screenshotTime')
                                    .css('line-height')
                                    .replace('px', '')
                            )
                    ) > 1
                ) {
                    pr.css('display', '');
                    pr.css('justify-content', '');
                } else {
                    $('#rate').css('width', '300px');
                    $('#screenshotTime').css('width', '500px');
                }
                // 鼠标抬起
                that.initWidth = width;
                that.initHeight = height;
                that.initX = x;
                that.initY = y;
                console.log(x, y, width, height);
            };
        },
        clipImage(x, y, width, height) {
            html2canvas(document.querySelector('body')).then((canvas) => {
                const scale = window.devicePixelRatio;
                const clipCanvas = document.createElement('canvas');
                clipCanvas.width = width * scale;
                clipCanvas.height = height * scale;
                const context = clipCanvas.getContext('2d');
                context.scale(1 / scale, 1 / scale);
                context.drawImage(
                    canvas,
                    x * scale,
                    y * scale,
                    width * scale,
                    height * scale,
                    0,
                    0,
                    width * scale,
                    height * scale
                );
                const clipedImageBase64 = clipCanvas.toDataURL();
                const img = document.createElement('a');
                img.href = clipedImageBase64;
                img.download = 'pathology.jpg';
                img.click();
            });
        },
        sSuccess() {
            $('#canvasToolbar').css('display', 'none');
            const captureX =
                this.initWidth > 0
                    ? this.initX
                    : Math.abs(this.initX + this.initWidth);
            const captureY =
                this.initHeight > 0
                    ? this.initY
                    : Math.abs(this.initY + this.initHeight);
            this.clipImage(
                captureX,
                captureY,
                Math.abs(this.initWidth),
                Math.abs(this.initHeight) + $('#prescription').height()
            );
            const shadeCs = document.getElementById('shadeCanvas');
            const shadeContext = shadeCs.getContext('2d');
            shadeContext.clearRect(0, 0, shadeCs.width, shadeCs.height);
            $('#shadeCanvas').hide();
            $('#prescription').css('display', 'none');
            this.changeColor = -1;
        },
        sCancel() {
            $('#canvasToolbar').css('display', 'none');
            const shadeCs = document.getElementById('shadeCanvas');
            const shadeContext = shadeCs.getContext('2d');
            shadeContext.clearRect(0, 0, shadeCs.width, shadeCs.height);
            $('#shadeCanvas').hide();
            $('#prescription').css('display', 'none');
            // 加上键盘监听事件
            this.changeColor = -1;
        },
        // 子组件AlFlaoting 调用
        jumpTo(val) {
            if (!!val) {
                this.currentSuspicious = val;
                this.$refs.openseadragon.jumpToArea(
                    val.data.minX,
                    val.data.minY,
                    val.data.minX + val.data.pixelsWidth,
                    val.data.minY + val.data.pixelsHeight
                );
                // AI标注闪烁
                const annotation = _.find(this.AIdata, { id: val.id });
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.timer = null;
                this.flag = true;
                if (!this.timerOne) {
                    this.timerOne = setInterval(() => {
                        this.AnnotationOpacity(annotation);
                    }, 150);
                }
                this.timer = setTimeout(() => {
                    clearInterval(this.timerOne);
                    this.timerOne = null;
                }, 700);
            }
        },
        // AI标注闪烁
        AnnotationOpacity(Annotation) {
            if (this.flag && this.switchValue.isFlicker) {
                Annotation.setOpacity(0);
                this.flag = false;
            } else if (this.switchValue.isFlicker) {
                Annotation.setOpacity(1);
                this.flag = true;
            }
        },
        //转化数字
        getProbablity(val) {
            var mNumber = Number(val);
            if (!isNaN(mNumber)) {
                return mNumber.toFixed(3);
            }
            return '0';
        },
        transferPositiveToNegative(value) {
            let isPositive = value.info.resultLevel.some(
                (item) => item.key === '属性' && item.value === '阳性'
            );
            let lessCount = 2;
            if (
                this.countOfTransferPostiveToNegativeList.length > 0 &&
                this.countOfTransferPostiveToNegativeList[0].label
            ) {
                lessCount = parseInt(
                    this.countOfTransferPostiveToNegativeList[0].label
                );
            }
            if (!isPositive) {
                return false;
            }
            let isCountLessThanSpecifcCount =
                value.annotations.length <= lessCount;
            if (isCountLessThanSpecifcCount) {
                return true;
            }
            return false;
        },
        // 获取AI标注
        getAIAnnotations() {
            // const c = this.biopsyOriginFilename.indexOf('.');
            // const name = this.biopsyOriginFilename.substring(0, c);

            let _this = this;
            _this.aiAnnotationsData = [];
            _this.doctorOpenViewerTime(_this.biopsyId);
            _this
                .$axios({
                    method: 'GET',
                    url: `${_this.AnnotationsServiceURL}/annotations/results/aiprediction/${_this.biopsyId}`,
                })
                .then((res) => {
                    _this.F3AnalysisInfo = '';
                    if (res.data.code === 200) {
                        // 数据处理
                        console.log('获取AI标注', res.data);
                        _this.F3info = res.data.data.info;
                        //阴性片子默认四倍放大
                        if (res.data.data.info.pred == 0) {
                            setTimeout(() => {
                                _this.$refs.openseadragon.zoomJumpTo(4);
                            }, 1000);
                        }
                        let mTransger = _this.transferPositiveToNegative(
                            res.data.data
                        );
                        _this.F3info.resultLevel.forEach((item) => {
                            if (item.key === '属性') {
                                if (mTransger) {
                                    item.value = '阴性';
                                }
                                _this.AIEvaluationForm.masculineAi = item.value;
                            }
                            if (item.key === '肠化') {
                                _this.AIEvaluationForm.imAi = item.value;
                            }
                            if (item.key === '萎缩') {
                                _this.AIEvaluationForm.atrophyAi = item.value;
                            }
                            if (item.key === '活动性') {
                                _this.AIEvaluationForm.activityAi = item.value;
                            }
                            if (item.key === '慢性炎症') {
                                _this.AIEvaluationForm.chronicInflammationAi =
                                    item.value;
                            }
                            if (item.key === 'HP') {
                                _this.AIEvaluationForm.hpai = item.value;
                            }
                            if (item.key === '异性增生') {
                                _this.AIEvaluationForm.alienGrowthAi =
                                    item.value;
                            }

                            let mStr = '';
                            if (item.probablity) {
                                mStr =
                                    '(' +
                                    _this.getProbablity(item.probablity) +
                                    ')';
                            }
                            _this.F3AnalysisInfo +=
                                '<span style="margin-left:5px;color:#10a1df">' +
                                item.key +
                                '</span>' +
                                ':<span style="margin-left:5px;color:#10a1df">' +
                                item.value +
                                mStr +
                                '</span>';
                        });
                        if (!mTransger) {
                            let i = 1;
                            res.data.data.annotations.forEach((ele) => {
                                const temPoints = [];
                                ele.points.forEach((item) => {
                                    const coord1 = ['points', item[0], item[1]];
                                    temPoints.push(coord1);
                                });
                                const object = {
                                    annotationId: i++,
                                    classToSet: {
                                        color: ele.color,
                                        name: '人工智能',
                                    },
                                    points: temPoints,
                                    name: '人工智能结果1',
                                    show: true,
                                    type: ele.type,
                                    probablity: _this.getProbablity(
                                        ele.probability
                                    ),
                                };
                                _this.aiAnnotationsData.push(object);
                            });
                        }
                    }
                });
        },
        mouseover() {
            this.styleObjectClass = {
                left: '0',
            };
        },
        mouseout() {
            this.styleObjectClass = {
                left: '-100px',
            };
        },
        viewZoom(data) {
            this.viewZoomNumber = data.toFixed(2);
        },
        handleClose() {
            this.mark.warning = '';
            this.mark.remark = '';
        },
        updateAnnotation(annotation) {
            this.mark.warning = annotation.remarkOne;
            this.mark.remark = annotation.remarkTwo;
            this.updateAnnInfo.area = annotation.areaInfo.area;
            this.updateAnnInfo.width = annotation.areaInfo.width;
            this.updateAnnInfo.height = annotation.areaInfo.height;
            this.updateAnnInfo.saveUserName = annotation.saveUserName;
            this.updateAnnInfo.createAt = annotation.createAt;
            this.updateAnnInfo.annotationId = annotation.annotationId;
            this.annDialogVisible = true;
            this.$refs.openseadragon.jumpToArea(
                annotation.extraMessageJson.minX,
                annotation.extraMessageJson.minY,
                annotation.extraMessageJson.minX +
                    annotation.extraMessageJson.pixelsWidth,
                annotation.extraMessageJson.minY +
                    annotation.extraMessageJson.pixelsHeight
            );
        },
        updateAnnSubmit(annotationId) {
            if (!this.validateForm()) {
                return;
            }
            const submitInfo = {
                remarkOne: this.mark.warning,
                remarkTwo: this.mark.remark,
            };
            try {
                this.$axios({
                    method: 'put',
                    url: `/PROXY-Remote/annotations/biopsy/${this.biopsyId}/annotations/${annotationId}`,
                    data: submitInfo,
                    headers: {
                        'Content-Type': 'application/json',
                    },
                }).then(
                    (res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success('更新成功');
                            this.getAnnotations(
                                this.biopsyId,
                                null,
                                null,
                                null
                            );
                            this.mark.remark = '';
                        }
                    },
                    (err) => {
                        this.$message.info(
                            `更新失败  ${err.response.data.message}`
                        );
                    }
                );
            } catch (e) {
                console.log(`请求失败  ${e}`);
            }
            this.annDialogVisible = false;
        },
        deleteAnnotation(annotationId) {
            this.$confirm('此操作将永久删除该标注, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    try {
                        this.$axios({
                            method: 'delete',
                            url: `/PROXY-Remote/annotations/biopsy/${this.biopsyId}/annotations/${annotationId}`,
                            data: {},
                        }).then(
                            (res) => {
                                if (res && res.data.code === 200) {
                                    this.$message.info('删除成功');
                                    this.getAnnotations(
                                        this.biopsyId,
                                        null,
                                        null,
                                        null
                                    );
                                } else {
                                    this.$message.info(res.data.message);
                                }
                            },
                            (err) => {
                                this.$message.info(
                                    `删除失败  ${err.response.data.message}`
                                );
                            }
                        );
                    } catch (e) {
                        console.log('请求失败');
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                });
        },
        findTagName() {
            const x = document.activeElement.tagName;
            const _this = this;
            if (
                x === 'INPUT' ||
                x === 'TEXTAREA' ||
                document.activeElement.id === 'SCinputBox'
            ) {
                document.removeEventListener('keydown', _this.watchEnter);
            } else {
                document.addEventListener('keydown', _this.watchEnter);
            }
        },
        diagnosisLast() {
            if (this.previousBiopsyId) {
                this.getBiopsyCopy(this.previousBiopsyId);
            } else {
                this.$message.info('上一个诊断无数据');
            }
        },
        diagnosisNext() {
            if (this.nextBiopsyId) {
                this.getBiopsyCopy(this.nextBiopsyId);
            } else {
                this.$message.info('下一个诊断无数据');
            }
        },
        // 监听回车按钮事件
        watchEnter(e) {
            if (
                !this.pathologyId ||
                Object.values(this.visibleDict).indexOf(true) !== -1
            ) {
                //限制热键
                return;
            }
            const keyNum = window.event ? e.keyCode : e.which; // 获取被按下的键值
            const altKey = e.altKey;
            /*Enter-13,F1-112,F2-113,F3-114,1-49,2-50,3-51,4-52,5-53,6-54,Spacebar-32,E-69,Q-81,Tab-9,Esc-27,H-72,O-79,z-90,x-88,c-67,f-70,a-65,d-68,w-87,s-83,F11-122,F12-123,*/
            // 判断如果用户按下了回车键（keycody=13）
            if (keyNum === 83) {
                const val = this.AIdata.find((item) => {
                    return item.inIndex === this.currentSuspicious.inIndex + 1;
                });
                if (!!val) {
                    this.$refs.AIFloatingREF.nextSuspicious(val.inIndex);
                } else {
                    this.$message.warning({ message: '已到底' });
                }
            }
            if (keyNum === 87) {
                const val = this.AIdata.find((item) => {
                    return item.inIndex === this.currentSuspicious.inIndex - 1;
                });
                if (!!val) {
                    this.$refs.AIFloatingREF.previousSuspicious(val.inIndex);
                } else {
                    this.$message.warning({ message: '已到顶' });
                }
            }
            if (keyNum === 13) {
                console.log('dayin');
            }
            if (keyNum === 67) {
                this.AIEvaluationDialogShow();
                e.preventDefault();
            }
            if (keyNum === 70) {
                let _this = this;
                if (_this.experimentDialog) {
                    _this.experimentDialog = false;
                } else {
                    _this.experimentDialog = true;
                    setTimeout(() => {
                        _this.$refs.DiagnosisResultStatisticsComp.refresh();
                    }, 100);
                }
                e.preventDefault();
            }

            if (altKey && keyNum === 49) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 49) {
                this.$refs.openseadragon.zoomJumpTo(1);
            }
            if (altKey && keyNum === 50) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabPathologyInfo';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 50) {
                this.$refs.openseadragon.zoomJumpTo(2);
            }
            if (altKey && keyNum === 51) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabPathologyList';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 51) {
                this.$refs.openseadragon.zoomJumpTo(4);
            }
            if (altKey && keyNum === 52) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabOpinion';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 52) {
                this.$refs.openseadragon.zoomJumpTo(10);
            }
            if (altKey && keyNum === 53) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabAttachment';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 53) {
                this.$refs.openseadragon.zoomJumpTo(20);
            }
            if (altKey && keyNum === 54) {
                if (this.visibleDict.patienterDetail) {
                    this.patienterDetailclosed();
                } else {
                    this.activeTabItem = 'tabDiscussion';
                    this.patienterDetailMethod();
                }
                e.preventDefault();
            }
            if (!altKey && keyNum === 54) {
                this.$refs.openseadragon.zoomJumpTo(40);
            }
            if (keyNum === 32) {
                this.$refs.openseadragon.ifMove();
            }
            if (keyNum === 114) {
                e.preventDefault();
                this.drawerAi();
            }
            if (keyNum === 69) {
                this.rotateRight();
            }
            if (keyNum === 81) {
                this.rotateLeft();
            }
            if (keyNum === 79) {
                this.goHome();
            }
            if (keyNum === 90) {
                this.diagnosisLast();
            }
            if (keyNum === 88) {
                this.diagnosisNext();
            }
            if (keyNum === 122) {
                this.sreenFull();
            }
            if (keyNum === 123) {
                if (this.hotkey) {
                    this.hotkey = false;
                } else {
                    this.hotkeyMethods();
                    e.preventDefault();
                }
            }
            if (keyNum === 72) {
                if (this.showleftPic) {
                    this.showleftPic = false;
                } else {
                    this.showleftPic = true;
                }
            }
            if (keyNum === 27) {
                this.newannotations = [];
                this.mark.warning = '';
                this.mark.remark = '';
                this.changeColor = -1;
                this.__clearAllDrawingTools();
                this.$refs.openseadragon.panToggle(true);
            }
        },
        validateForm() {
            let decide = false;
            this.$refs.markRefForm.validate((valid) => {
                if (valid) {
                    decide = true;
                } else {
                    this.activeName = 'basicInformation';
                }
            });
            return decide;
        },
    },
    // 在beforeDestroy()生命周期内清除定时器：
    beforeDestroy() {
        clearInterval(this.timer);
        this.timerOne = null;
        this.timer = null;
        // 移除监听回车按键
        const _this = this;
        document.removeEventListener('keydown', _this.watchEnter);
    },
    computed: {
        reversedLabelUrl() {
            return this.labelUrl;
        },
        dziUrl() {
            return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}.dzi`;
        },
        switchValueScale() {
            return this.switchValue.scale;
        },
        switchValueZoom() {
            return this.switchValue.zoom;
        },
        switchValueMarkLabel() {
            return this.switchValue.markLabel;
        },
        switchValueAIAnalysis() {
            return this.switchValue.AIAnalysis;
        },
        switchValuePatientId() {
            return this.switchValue.patientId;
        },
        switchValueNavigator() {
            return this.switchValue.navigator;
        },
        switchValueDisc() {
            return this.switchValue.disc;
        },
        switchValueNet() {
            return this.switchValue.net;
        },
    },
    watch: {
        switchValueScale(val) {
            let _this = this;
            if (val) {
                _this.$refs.openseadragon.viewer.scalebar({
                    pixelsPerMeter: _this.$refs.openseadragon.pixelsPerMeter,
                });
            } else {
                _this.$refs.openseadragon.viewer.scalebar({
                    pixelsPerMeter: null,
                });
            }
        },
        switchValueZoom(val) {
            let _this = this;
            _this.$refs.openseadragon.zoomSliderShow = val;
        },
        switchValueDisc(val) {
            let _this = this;
            _this.$refs.openseadragon.discShow = val;
        },
        switchValueMarkLabel(val) {
            //this.value = val;
        },
        switchValueAIAnalysis(val) {
            this.drawerAi();
        },
        //done
        switchValuePatientId(val) {
            //this.value = val;
        },
        switchValueNavigator(val) {
            let _this = this;
            _this.$refs.openseadragon.viewer.showNavigator = val;
        },
        switchValueNet(val) {
            let _this = this;
            if (val) {
                _this.$refs.openseadragon.startDrawingGrid();
            } else {
                _this.$refs.openseadragon.stopDrawingGrid();
            }
        },
    },
    mounted() {
        if (!this.pathologyId) {
            this.qualityEvaluationShow = true;
            this.sliceQualityEvaluateRank();
            this.getSliceInfoInfo(this.$route.query.biopsyId);
            this.visibleDict.isShowSliceInfoStatus = true;
        } else {
            this.visibleDict.isShowSliceInfoStatus = false;
        }
        // 字典数据获取
        this.dictionariesRequest(this.dictionaryMap);
        this.expertOpinion();
        this.wbClient = new Client(process.env.WEBSORKET_URL);
        this.collectionDignosis = this.wbClient.subscribe('diagnosis');
        this.collectionDignosis.addObserve(this.$route.query.userId, (data) => {
            console.log('observe', 'diagnosis', this.$route.query.userId, data);
            // if (this.pathologyId !== data.diagnosisId) {
            //     this.getBiopsy(data.diagnosisId);
            // }
        });
        this.collectionAnnotationImages =
            this.wbClient.subscribe('annotations');
        // 验证用户登陆,登陆后才能操作
        try {
            let _this = this;
            // console.log('this.$route.query.authorization',this.$route.query.authorization);
            this.loading = true;
            this.$axios({
                method: 'get',
                url: '/PROXY-Remote/current-user',
                headers: {
                    defaultHeader: false,
                    authorization: this.$route.query.authorization,
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
            }).then(
                (res) => {
                    if (res && res.data.code === 200) {
                        const user = {
                            id: res.data.data.id,
                            name: res.data.data.name,
                        };
                        this.$store.commit('setUser', user);
                        this.$store.commit('setPropertyGeneral', {
                            key: 'authorization',
                            value: this.$route.query.authorization,
                        });
                        jcanvasFactory($, window);
                        this.getBiopsyCopy(Number(this.$route.query.biopsyId));
                        this.loading = false;
                        this.getBiopsyAssess(this.$route.query.biopsyId);
                        setTimeout(() => {
                            this.findTagName(); //由当时的必须点击一下页面才能执行openseadragon的方法改成了自动点击一下页面
                        }, 100);
                    } else {
                        this.$message.info('用户验证失败');
                        this.$store.commit('setPropertyGeneral', {
                            key: 'authorization',
                            value: '',
                        });
                        this.$router.push('/login');
                    }
                },
                (err) => {
                    this.$message.info(
                        `用户验证失败  ${err.response.data.message}`
                    );
                    this.$store.commit('setPropertyGeneral', {
                        key: 'authorization',
                        value: '',
                    });
                    this.$router.push('/login');
                }
            );
        } catch (e) {
            this.$message.info('请求失败');
        }
        // this.getBiopsy();
        //     this.$store.commit('setPropertyGeneral', {
        //     key: 'authorization',
        //     value: this.$route.query.authorization,
        // });
        const angle = this.$refs.openseadragon.getRotation();
        if (angle) {
            this.viewerAngle = angle;
        }
        this.$store.commit('setPropertyGeneral', {
            key: 'authorization',
            value: this.$route.query.authorization,
        });

        const { clientWidth } = document.body;
        const { clientHeight } = document.body;
        // 更新canvas宽高
        $('#drawRectCanvas').attr('width', clientWidth);
        $('#drawRectCanvas').attr('height', clientHeight);
        $('#shadeCanvas').attr('width', clientWidth);
        $('#shadeCanvas').attr('height', clientHeight);
        $('#shadeCanvas').hide();
        $('#drawRectCanvas').hide();
        if (!this.pathologyId) {
            document.removeEventListener('keydown', this.watchEnter);
        }
    },
    destroyed() {
        console.log('destroyed');
        this.wbClient.close();
    },
};
</script>


<style scoped>
.overlay {
    position: absolute !important;
    /* background-image: linear-gradient(to right, #4F4F4F, #E8E8E8)!important; */
    background-color: #0b1c2e;
    top: 45px;
    right: 0;
    width: 40px;
    height: 100%;
    /* line-height: 50px; */
    z-index: 1;
}

.divCoordinateColor {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px 25px 15px 15px;
    top: 267px;
    right: 45px;
    width: 270px;
    z-index: 4;
}

.divPictureHandle {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px;
    top: 227px;
    right: 45px;
    width: 80px;
    z-index: 4;
}

.divMarkLabelHandle {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px;
    top: 190px;
    right: 45px;
    width: 80px;
    z-index: 4;
}

.divSettingSwitch {
    position: absolute !important;
    background-color: #0b1c2e;
    border-radius: 20px;
    padding: 15px;
    top: 300px;
    right: 45px;
    width: 110px;
    z-index: 4;
}

.openSeadragon {
    position: relative;
    top: 45px;
    height: 95%;
}

.tool-bar1 {
    float: left;
    cursor: pointer;
    color: #fff;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 5px;
    display: flex;
    align-items: center;
}

.tool-bar3 {
    float: left;
    cursor: pointer;
    color: #fff;
    padding-left: 5px;
    padding-bottom: 10px;
    padding-top: 5px;
    display: flex;
    align-items: center;
}

.tool-bar2 {
    float: left;
    text-align: center;
    cursor: pointer;
    color: #fff;
    padding-bottom: 10px;
    padding-top: 5px;
    width: 39px;
}

.tool-bar-degree {
    float: left;
    text-align: center;
    cursor: pointer;
    color: #fff;
    padding-right: 3px;
    padding-top: 3px;
}

.cut-line {
    display: inline;
    float: left;
    margin-right: 1.3%;
    background: #10a1df;
    width: 100%;
    height: 1px;
    display: flex;
    align-items: center;
    text-align: center;
}

.red {
    color: #12945c;
}

.dialog {
    width: 65%;
    height: 130px;
    margin-bottom: 2%;
    position: absolute;
    bottom: 1px;
    left: 17%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
    overflow-x: auto;
    border-top-right-radius: 18px;
    border-top-left-radius: 18px;
}

.F3info {
    width: 65%;
    line-height: 30px;
    height: 30px;
    position: absolute;
    bottom: 1px;
    left: 17%;
    z-index: 1;
}

.quality-evaluation {
    padding-left: 15px;
    width: 80%;
    height: 80px;
    position: absolute;
    bottom: 10px;
    left: 19%;
    z-index: 1;
    /* background: rgba(0, 0, 0, 0.1); */
}

.liImg {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 10px;
    position: relative;
}

.dialog ul li {
    list-style: none;
}

.dialog ul {
    overflow: hidden;
}

.dialog li {
    float: left;
}

.active {
    box-shadow: 0px 0px 3px 2px #808080;
    width: 200px;
    background-color: rgba(102, 102, 102, 0.3);
    color: #fafafa;
    z-index: 1;
    position: fixed;
    bottom: 200px;
    border-radius: 5px;
    padding: 10px;
}

.leftPic {
    height: 600px;
    overflow: auto;
    top: 50px;
    border: 0;
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    touch-action: none;
    opacity: 0.8;
    z-index: 1;
}

.rightLable {
    position: fixed;
    top: 46px;
    right: 246px;
    opacity: 0.8;
    z-index: 1;
}

.keyword {
    font-size: 12px;
    color: #f78989;
    margin-left: 21px;
    position: absolute;
    top: 5px;
}

.updateInfo {
    box-shadow: 0 0 3px 2px #808080;
    width: 200px;
    background-color: rgba(102, 102, 102, 0.3);
    color: #fafafa;
    z-index: 12;
    margin-left: 19%;
    position: fixed;
    bottom: 200px;
    border-radius: 5px;
}

.annPicUserName {
    position: absolute;
    top: 80px;
    left: 0;
    width: 80px;
    color: #fafafa;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#drawRectCanvas {
    position: absolute;
    z-index: 500;
    left: 0;
    top: 0;
    cursor: crosshair;
}

#shadeCanvas {
    position: absolute;
    z-index: 250;
    left: 0;
    top: 0;
}

#canvasToolbar {
    width: 104px;
    position: absolute;
    z-index: 1000;
    display: none;
    height: 26px;
    background: white;
}

#canvasToolbar .error {
    color: rgb(232, 30, 53);
    font-size: 13px;
}

#canvasToolbar .check {
    font-size: 13px;
    margin-right: 5px;
    color: rgb(73, 203, 95);
}

#canvasToolbar .canvasButton {
    margin-left: 1px;
    margin-top: 3px;
    cursor: pointer;
    width: 50px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    float: left;
}

#canvasToolbar .canvasButton:hover {
    border: 1px solid #ccc;
}

.colorStatus {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}

.greenStatus {
    background-color: green;
}

.redStatus {
    background-color: red;
}

.greyStatus {
    background-color: grey;
}

.yesActive {
    margin-bottom: 2%;
    border: solid 3px red;
    cursor: pointer;
    position: relative;
    width: 200px;
}

.noActive {
    margin-bottom: 2%;
    border: solid 1px green;
    cursor: pointer;
    position: relative;
    width: 200px;
}

.height40 {
    height: 40px;
    line-height: 40px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: auto;
}

/deep/ .el-input-group__append {
    padding: 0 10px;
    width: 10px;
}

/deep/ .divCoordinateColor .el-slider__runway {
    background-image: linear-gradient(to right, #83d2ff, #e6a2ff);
}

.juzhong {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
    margin-left: 25px;
}

.red-color {
    color: red;
}
</style>
